如何让 JS 变量保留页面刷新后的值？

是否有可能永久地改变一个 javascript 变量？如果我把变量 X 设置为等于1。然后单击一个按钮，将该变量更改为2。我怎样才能让这个变量在刷新页面时保持在2？

286984 次浏览
小开

您将不得不使用 cookie 来跨页面刷新存储值。您可以使用许多基于 javascript 的 Cookie 库中的任何一个来简化 Cookie 访问，如 这个

如果您只想支持 html5，那么您可以考虑 储藏室 api，如 本地存储/存储

例: 使用 本地存储和 Cookie 图书馆

var mode = getStoredValue('myPageMode');


function buttonClick(mode) {
mode = mode;
storeValue('myPageMode', mode);
}


function storeValue(key, value) {
if (localStorage) {
localStorage.setItem(key, value);
} else {
$.cookies.set(key, value);
}
}


function getStoredValue(key) {
if (localStorage) {
return localStorage.getItem(key);
} else {
return $.cookies.get(key);
}
}
小开
最佳答案

这是可能的与 window.localStorage或 window.sessionStorage。不同之处在于，只要浏览器保持打开状态，sessionStorage就会持续下去，而在浏览器重启之后，localStorage仍然存活。持久性不仅适用于 整个网站的一个页面，还适用于 整个网站。

当您需要设置应该反映在下一页中的变量时，请使用:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

并且在任何页面(比如当页面加载完成时) ，都可以这样设置:

var someVarName = localStorage.getItem("someVarKey");

如果没有存储值，或者没有存储值，.getItem()将返回 null。

请注意，只有字符串值可以存储在这个存储器中，但是可以通过使用 JSON.stringify和 JSON.parse来克服这个问题。从技术上讲，无论何时调用 .setItem()，它都会对该值调用 .toString()并存储该值。

MDN 的 DOM 存储指南(链接在下面) ，有变通方法/填充，如果 localStorage不可用，最终会回到 cookie 这样的东西。

使用现有的或创建自己的迷你库来抽象保存任何数据类型(如对象文字、数组等)的能力并不是一个坏主意。

参考文献:

小开

您可以通过在客户端存储 cookie 来实现这一点。

小开

除了 cookies 和 localStorage之外，至少还有一个地方可以存储“半持久”客户端数据: window.name。分配给 window.name的任何字符串值都将保持在那里，直到窗口关闭。

要测试它，只需打开控制台并键入 window.name = "foo"，然后刷新页面并键入 window.name; 它应该使用 foo进行响应。

这有点像黑客技术，但是如果您不希望在每个请求中都向服务器发送充满不必要数据的 cookie，而且如果由于某种原因(遗留客户端)不能使用 localStorage，那么可以考虑使用它。

window.name还有另一个有趣的属性: 它对其他域提供的窗口是可见的; 它不像 window的几乎所有其他属性那样受同源策略的约束。因此，除了在用户导航或刷新页面时在那里存储“半持久”数据之外，您还可以使用它进行无 CORS 的跨域通信。

请注意，window.name只能存储字符串，但是由于 JSON的可用性很广，即使对于复杂的数据来说，这也不是什么大问题。


提交答案