在 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';
 });

所以当用户第一次访问我的网站时，滑块是空的。用户单击其中一个选择区域后，我设置了全局变量值。然后，如果用户继续在我的网站上导航到不同的页面，用户应该会看到一个滑块图像作为他的选择的结果。

但是，这似乎不起作用。

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

谢谢！

Answer 1

全局变量不会从一页保留到下一页。每个页面都会启动一个全新的 javascript 上下文（所有新的全局变量、函数等）。

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

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

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

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

LocalStorage 是一个类似于 cookie 的概念，但它更容易管理和更高效（数据不会随着每个页面请求发送到服务器）。