在前端开发中，有时候我们需要在页面的不同加载周期之间保存一些数据。比如用户输入过的表单数据，或者是某个状态值等等。这时候就需要使用持久化变量。
什么是持久化变量？
持久化变量指的是能够在多个页面生命周期中保留其值的变量。换句话说，即使你刷新页面或关闭浏览器，这些变量的值也会被保留下来。
在 Web 开发中，我们可以通过两种方法来实现持久化变量：Cookie 和 LocalStorage。
使用 Cookie 进行持久化
Cookie 是存储在客户端计算机上的小型文本文件。它们可以用于记录访问者的活动，例如他们最喜欢的网站设置和登录详细信息等。
要创建一个 Cookie，可以使用 JavaScript 的 document.cookie 属性。以下是一个例子：
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
在这个例子中，我们创建了一个名为“username”的 Cookie，并将其值设置为“John Doe”。还设置了 cookie 的过期时间和路径。
要读取 Cookie 的值，可以使用 JavaScript 的 document.cookie 属性。以下是一个例子：
const cookies = document.cookie.split(";");
cookies.forEach(cookie => {
const [name, value] = cookie.split("=");
console.log(`${name}=${value}`);
});这个例子中，我们将 document.cookie 属性返回的 Cookie 字符串拆分成一个数组，并使用 forEach() 方法遍历该数组以输出每个 Cookie 的名称和值。
使用 LocalStorage 进行持久化
LocalStorage 是一种 HTML5 Web 存储机制。它允许开发人员将数据存储在客户端上，以便将其保留到下次页面加载或浏览器会话中。
要向 LocalStorage 中添加数据，可以使用 JavaScript 的 localStorage.setItem() 方法。例如：
localStorage.setItem("username", "John Doe");此代码将名为“username”的键和值“John Doe”添加到 LocalStorage 中。
要从 LocalStorage 中检索数据，可以使用 localStorage.getItem() 方法。例如：
const username = localStorage.getItem("username");
console.log(username);此代码将检索名为“username”的键的值，并将其打印到控制台中。
总结
无论是使用 Cookie 还是 LocalStorage，都可以实现在页面生命周期之间保存数据的功能。然而，Cookie 具有一些限制，例如存储量受限，而 LocalStorage 则更适用于大量数据的持久化存储。在选择使用哪种方法时，需要考虑应用程序的需求并了解方法之间的区别。
希望本文能够对你理解并使用持久化变量提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15100