Question

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

Answer 1

这可以通过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存储指南（下面链接），有解决方法/ polyfills，如果localStorage不可用，最终会回到cookie之类的东西。

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

<强>参考文献：

浏览器Storage - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
JSON - https://developer.mozilla.org/en-US/docs/JSON
浏览器存储兼容性 - http://caniuse.com/namevalue-storage
存储对象 - Storing Objects in HTML5 localStorage

Answer 2

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

要测试它，只需打开控制台并输入window.name = "foo"，然后刷新页面并输入window.name;它应该以{{1}}回复。

这有点像黑客，但如果您不希望每次请求都将填充了不必要数据的cookie发送到服务器，并且由于某种原因您无法使用foo（旧版客户端）），这可能是一个考虑的选择。

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

请注意，window只能存储字符串，但window.name具有广泛的可用性，即使对于复杂的数据，这也不应该是一个问题。

Answer 3

您必须使用cookie来跨页面刷新存储值。您可以使用许多基于JavaScript的cookie库中的任何一个来简化cookie访问，例如this one

如果您只想支持html5，那么您可以将Storage / localStorage

视为sessionStorage api

例如：使用localStorage和cookies library

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

Answer 4

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

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

4 个答案: