本地存储 JavaScript

在 Web 开发中，我们需要经常地将数据存储在客户端以便后续的访问和使用，这时候就需要用到本地存储技术。本地存储指的是将数据存储在客户端本地，以供后续使用。

在 JavaScript 中，我们可以使用以下两种本地存储机制：

1. Cookie 存储
2. Web 存储（localStorage 和 sessionStorage）

Cookie 存储

Cookie 是一种存储在客户端的小型数据文件，由服务器发送到客户端并保存在本地。Cookie 可以存储用户的偏好设置、登录状态等数据。通过设置 Cookie 的生命周期，这些数据可以在用户访问同一站点时被重复使用。

下面是一个保存用户名和密码的 Cookie：

document.cookie = "username=john; password=doe";

使用 document.cookie 可以读取 cookie。

Web 存储

Web 存储指的是 localStorage 和 sessionStorage 两种机制，它们均可用于将数据存储在客户端。

localStorage

localStorage 是一种具有持久性的本地存储机制，保存在客户端，不随着浏览器的关闭而失效。存储的数据是以键值对的形式进行保存的。

以下代码在 localStorage 中保存和读取一个名为 username 的字符串：

// 保存
localStorage.setItem("username", "john");

// 读取
const username = localStorage.getItem("username");

sessionStorage

sessionStorage 也是一种本地存储机制，但是与 localStorage 不同的是，sessionStorage 中存储的数据会随着浏览器窗口的关闭而失效。

以下代码在 sessionStorage 中保存和读取一个名为 password 的字符串：

// 保存
sessionStorage.setItem("password", "doe");

// 读取
const password = sessionStorage.getItem("password");

总结

本地存储是 Web 开发中的一项重要技术，可用于将数据保存在客户端，以便后续的访问和使用。在 JavaScript 中，可以使用 Cookie 存储和 Web 存储（localStorage 和 sessionStorage）两种机制进行本地数据存储。需要注意的是，不同的存储方式有不同的使用场景和注意事项，开发者应该根据具体的业务需求和客户端状态来选择合适的方式进行数据存储。