javascript - 在 JQuery 中的多个函数之间使用全局变量？

Question

我想使用 jQuery 动态加载图像，如下所示:

main.js

 var slidersrc="";  //try to define global variable - not sure if this is correct

 jQuery(document).ready(function() {
     jQuery("#sliderimg").attr('src', slidersrc);
 });

 jQuery("#selection1").click(function() {
     slidersrc='wp-content/themes/*****/slide1.png';
 });

因此，用户第一次访问我的网站时， slider 为空。用户单击其中一个选择区域后，我设置全局变量值。然后，如果用户继续在我的网站上导航到不同的页面，则应该向用户显示一个 slider 图像作为其选择的结果。

但是，这似乎不起作用。

我在 jQuery 中使用的全局变量正确吗？或者有没有更好的方法在客户端保存用户选择值？

谢谢!

Answer 1

全局变量不能从一页保存到下一页。每个页面都会启动一个全新的 javascript 上下文(所有新的全局变量、函数等...)。

如果您想将状态从一页保存到下一页，您的选择是:

1. 将数据放入 Cookie 中，您可以在加载每个连续页面时读取该数据。
2. 将数据放入浏览器本地存储中，您可以在加载每个连续页面时使用 JavaScript 读取该数据(推荐选项)。
3. 将数据存储在服务器上，并在服务器提供数据时将其嵌入到每个页面中。

您可以阅读有关如何从浏览器 LocalStorage here 读取和写入的信息和 here .

如果您计划在用户每次单击时更改 slider 图像，那么您可能希望将索引保存到本地存储中的图像数组中。加载页面时，您从 localStorage 读取当前索引(如果本地存储中不存在值，则提供默认值)，然后将当前值写回 localStorage 以供下一页使用。如果用户执行某些操作导致索引更新为新值，则您可以更新页面，然后将该新索引写入 localStorage，以便下一页可以从那里读取它，依此类推。

LocalStorage 与 cookie 的概念类似，但它更容易管理且更高效(数据不会随每个页面请求发送到服务器)。