140

是否可以永久更改 javascript 变量？如，如果我设置变量 X 并使其等于 1。然后单击按钮将该变量更改为 2。如何使该变量在页面刷新时保持为 2？

4

4 回答 4

289

这可以通过window.localStorageor来实现window.sessionStorage。不同之处在于，sessionStorage只要浏览器保持打开状态，它就会持续存在，在浏览localStorage器重新启动之后仍然存在。持久性适用于整个网站，而不仅仅是其中的一个页面。

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

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

在任何页面中（比如页面加载时），得到它：

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

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

请注意，此存储中只能存储字符串值，但这可以通过使用JSON.stringifyand来克服JSON.parse。从技术上讲，无论何时调用.setItem()，它都会调用.toString()该值并存储它。

localStorageMDN 的 DOM 存储指南（链接如下）有变通方法/polyfill，如果不可用，最终会退回到 cookie 之类的东西。

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

参考：

于 2013-04-25T04:22:39.473 回答
31

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

要测试它，只需打开控制台并输入window.name = "foo"，然后刷新页面并输入window.name；它应该以foo.

这有点小技巧，但是如果您不希望在每次请求时都将填充了不必要数据的 cookie 发送到服务器，并且如果您localStorage出于任何原因（旧客户端）都无法使用，则可以选择考虑。

window.name还有另一个有趣的特性：它对从其他域提供服务的窗口可见；它不像几乎所有其他财产一样受同源政策的约束window。因此，除了在用户导航或刷新页面时在其中存储“半持久”数据外，您还可以将其用于无 CORS 的跨域通信。

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

于 2013-04-25T04:40:44.437 回答
8

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

如果您只想支持 html5，那么您可以考虑像localStorage / sessionStorage这样的Storage api

例如：使用localStorage和cookies 库

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);
    }
}
于 2013-04-25T04:22:19.953 回答
2

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

于 2013-04-25T04:23:05.097 回答