是否可以永久更改 javascript 变量？如，如果我设置变量 X 并使其等于 1。然后单击按钮将该变量更改为 2。如何在刷新页面时使该变量保持在 2？
页面刷新后如何让JS变量保留值？
IT技术
javascript
html
2021-01-22 15:48:32
4个回答
这可以使用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 之类的东西。
使用现有的或创建自己的迷你库并不是一个坏主意，它抽象了保存任何数据类型（如对象文字、数组等）的能力。
参考：
除了 cookie 和 之外localStorage，至少还有一个其他地方可以存储“半持久”客户端数据：window.name. 您分配给的任何字符串值都window.name将保留在那里，直到窗口关闭。
要测试它，只需打开控制台并键入window.name = "foo"，然后刷新页面并键入window.name; 它应该以foo.
这有点麻烦，但是如果您不希望每次请求都将充满不必要数据的 cookie 发送到服务器，并且localStorage由于某种原因（旧客户端）而无法使用，则可以选择考虑。
window.name还有一个有趣的特性：它对来自其他域的窗口可见；它不像window. 因此，除了在用户导航或刷新页面时将“半持久”数据存储在那里之外，您还可以将其用于无 CORS 的跨域通信。
请注意，window.name只能存储字符串，但由于 的广泛可用性JSON，即使对于复杂数据，这也不是什么大问题。
您将不得不使用 cookie 来存储跨页面刷新的值。您可以使用许多基于 javascript 的 cookie 库中的任何一种来简化 cookie 访问，就像这个
如果你只想支持 html5，那么你可以考虑像localStorage / sessionStorage这样的Storage api
例如：使用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);
}
}
您可以通过在客户端存储 cookie 来做到这一点。