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

在页面刷新时保留 JavaScript 变量值

在 JavaScript 中，刷新页面时变量通常会丢失其值。为了克服这个限制，我们可以利用 window.localStorage 或 window.sessionStorage 方法。

window.localStorage

localStorage 允许我们存储持久的键值对除了浏览器重新启动之外。它适用于整个网站，而不仅仅是单个页面。

要设置刷新后应保留的变量，请使用：

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

要检索任何页面中的持久值， use:

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

window.sessionStorage

sessionStorage 的工作方式与 localStorage 类似，但仅在浏览器选项卡保持打开状态时保留数据。它对于临时存储特定于会话的信息非常有用。

要使用 sessionStorage，请将上述示例中的 localStorage 替换为 sessionStorage。

注意事项：

• localStorage 和 sessionStorage 只能存储字符串。要保存非字符串值，请使用 JSON.stringify 和 JSON.parse。
• 建议使用库或创建自己的抽象以方便保存各种数据类型。
• 这些方法提供了站点全范围的坚持。明智地使用它们以避免混乱和潜在的冲突。

参考文献：

• [DOM存储](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage)
• [localStorage](https://developer.moz illa.org/en-US/docs/DOM/Storage#localStorage)
• [JSON](https://developer.mozilla.org/en-US/docs/JSON)
• [浏览器存储兼容性](http://caniuse.com/namevalue-storage)
• [在 HTML5 localStorage 中存储对象](https://www.html5rocks.com/en/tutorials/storage/using-the- storage-api/)

以上是如何在页面刷新后保留 JavaScript 变量值？的详细内容。更多信息请关注PHP中文网其他相关文章！