页面刷新后如何让JS变量保留值？ [复制]

Posted 2023-02-27

【中文标题】页面刷新后如何让JS变量保留值？ [复制]

【英文标题】：How to get JS variable to retain value after page refresh? [duplicate]

【发布时间】：2013-04-18 20:24:10

【问题描述】：

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

【参考方案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 存储指南（链接如下）有变通方法/polyfill，如果 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

【讨论】：

localStorage 在 ios 设备中似乎无法在隐私浏览模式下工作。参考 [***.com/questions/14555347/…

@lan JSON.stringify 没有保留我们的功能，我们该如何解决？

是的，没有魔法..只需使用本地存储

【参考方案2】：

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

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

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

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

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

【讨论】：

我看到你偷偷溜进来...***.com/questions/10567847/… :)

@Ian 大声笑，很好。我不知道为什么，但我有点着迷window.name

我现在很感兴趣！这一切听起来都很熟悉，但我不确定我是否知道这个功能。我知道将name 设置为window.open，但这是我所接受的范围

在我的场景中，该参数不能跨选项卡或浏览器窗口持续存在，只能跨当前打开窗口中的页面调用。为此，window.name 完美！

【参考方案3】：

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

如果你只想支持 html5 那么你可以考虑Storage api like localStorage/sessionStorage

例如：使用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);
    

【参考方案4】：

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