白骑士队JavaScript教学进阶篇之浏览器API 3.4.3 本地存储（LocalStorage, SessionStorage, Cookies）

在现代Web开发中，处理用户数据的存储需求是不可避免的。JavaScript 提供了多种方式来实现这一需求，其中包括 ‘LocalStorage‘、‘SessionStorage‘ 和 ‘Cookies‘。这些技术允许开发者在用户浏览器中存储数据，使得网页能够记住用户的偏好、状态以及其他重要信息。

LocalStorage

‘LocalStorage‘ 是一种持久化的客户端存储机制，用于存储键值对数据。它的特点是数据没有过期时间，一旦存储，除非手动删除，否则数据会一直存在。

基本用法

‘LocalStorage‘ 使用非常简单，它提供了四个主要方法：‘setItem‘、‘getItem‘、‘removeItem‘ 和 ‘clear‘。

存储数据

localStorage.setItem("username", "JohnDoe");

读取数据

let username = localStorage.getItem("username");
console.log(username); // 输出：JohnDoe

删除数据
```
localStorage.removeItem("username");
```
清空所有数据
```
localStorage.clear();
```

适用场景

‘LocalStorage‘ 非常适合用于存储不需要定期更新的数据，例如用户偏好设置、主题选择、或持久化用户登录状态等。

SessionStorage

‘SessionStorage‘ 与 ‘LocalStorage‘ 类似，也是一种键值对存储机制，但它的存储时间仅限于浏览器会话的持续时间。一旦用户关闭浏览器标签或窗口，存储的数据就会被清除。

基本用法

‘SessionStorage‘ 的使用方法与 ‘LocalStorage‘ 完全相同。

存储数据

sessionStorage.setItem("sessionID", "123456");

读取数据

let sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // 输出：123456

删除数据
```
sessionStorage.removeItem("sessionID");
```
清空所有数据
```
sessionStorage.clear();
```

适用场景

‘SessionStorage‘ 适用于存储短期数据，例如当前浏览器会话中的临时信息，如表单数据或用户当前的活动状态。

Cookies

Cookies 是一种更早期的存储机制，用于在浏览器和服务器之间传递小块数据。与 ‘LocalStorage‘ 和 ‘SessionStorage‘ 不同，Cookies 的数据会随每次 HTTP 请求发送到服务器，因此通常用于身份验证和跟踪用户会话。

基本用法

Cookies 的设置和读取通常通过 ‘document.cookie‘ 进行，格式为 ‘key=value‘。

设置 Cookie
```
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";
```
- 代码解释：
  - ‘expires‘ 参数指定了 Cookie 的过期时间。
  - ‘path‘ 参数指定了 Cookie 的作用路径，‘/‘ 表示对整个网站有效。

读取 Cookie

let cookies = document.cookie;
console.log(cookies); // 输出所有Cookie，如 "username=JohnDoe; sessionID=123456"

删除 Cookie

let cookies = document.cookie;
console.log(cookies); // 输出所有Cookie，如 "username=JohnDoe; sessionID=123456"

删除 Cookie 需要设置一个已经过去的过期时间：

document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

适用场景

Cookies 常用于需要与服务器共享的数据，例如会话令牌、用户身份认证信息等。由于 Cookies 会随请求发送，因此存储数据的大小一般限制在 4KB 以内。

LocalStorage、SessionStorage 与 Cookies 的对比

总结

在开发网页应用时，根据需求选择合适的数据存储机制非常重要。‘LocalStorage‘ 和 ‘SessionStorage‘ 提供了简单且高效的客户端存储方案，适用于大多数应用场景。而 Cookies 则在需要与服务器交互时，尤其是在身份验证和会话管理中，仍然发挥着关键作用。通过合理使用这些存储机制，开发者可以提升用户体验，构建更智能、更个性化的网页应用。