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

在页面刷新之外保留 JavaScript 变量

在 JavaScript 中，可以通过按钮单击或其他事件动态修改变量。但是，默认情况下，这些更改会在页面刷新时丢失。如何确保变量在刷新页面后仍然保留其值？

本地和会话存储

JavaScript 中的持久存储是通过两种方法实现的： window.localStorage和window.sessionStorage。两者都提供了一种存储键值对的方法，但有细微的差别：

• localStorage：数据在浏览器会话和重新启动之间无限期地保留。
• sessionStorage: 数据仅在当前浏览器会话期间保留，并在窗口或选项卡打开后被清除已关闭。

存储数据：

要将变量存储在持久存储中，请使用 setItem() 以及所需的键和值：

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

检索数据：

之后页面刷新，使用 getItem() 检索存储的数据：

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

这会将存储的值分配给 someVarName，即使在页面刷新后也是如此。

克服限制：

本地和会话存储仅支持字符串值。要存储更复杂的数据类型，请考虑使用 JSON：

var obj = {
  prop1: "value1",
  prop2: "value2"
};

localStorage.setItem("objKey", JSON.stringify(obj));

稍后检索并解析数据：

var obj = JSON.parse(localStorage.getItem("objKey"));

其他资源：

• 浏览器存储： https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• 本地存储：https://developer.mozilla.org/en-US/docs/DOM /存储#localStorage

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