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

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没有,最终会回到像cookies这样的东西.

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

参考文献:

• 浏览器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
• 存储对象 - 在HTML5 localStorage中存储对象

Answer 2

除了cookie之外localStorage,还有至少一个其他地方可以存储"半持久"客户端数据:window.name.您指定的任何字符串值window.name将保留在那里,直到窗口关闭.

要测试它,只需打开控制台并键入window.name = "foo",然后刷新页面并键入window.name; 它应该回应foo.

这有点像黑客攻击,但是如果你不希望每次请求都将填充了不必要数据的cookie发送到服务器,并且localStorage由于任何原因你不能使用(传统客户端),那么它可能是一个选项.考虑.

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

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

Answer 3

您将不得不使用cookie来存储页面刷新的值.您可以使用许多基于JavaScript的cookie库中的任何一个来简化cookie访问,就像这一样

如果您只想支持html5,那么您可以将Storage api 视为localStorage/sessionStorage

例如:使用localStorage和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);
    }
}