Appearance
浏览器本地存储机制详解
在 Web 开发中，我们经常需要在浏览器端存储数据。常用的存储机制有三种：Cookie、LocalStorage 和 SessionStorage。
1. 基础概念
1.1 Cookie
Cookie 是最早的浏览器存储机制，主要用于解决 HTTP 无状态协议下的会话记录问题。当服务器向浏览器发送页面时，可以在响应头中包含 Cookie，浏览器会将其存储并在后续同源请求中自动带上。
1.2 LocalStorage
HTML5 引入的 Web Storage 之一，用于持久化的本地存储。除非主动删除，否则数据永远不会过期。适合存储一些长期有效的配置信息。
1.3 SessionStorage
Web Storage 的另一种形式，用于临时保存同一窗口（或标签页）的数据。一旦窗口或标签页关闭，数据就会被清除。
2. 核心区别对比
| 特性 | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成，默认是关闭浏览器后失效。 | 永久保存，除非手动清除。 | 仅在当前会话（窗口）有效，关闭窗口后清除。 |
| 存储大小限制 | 4KB 左右 | 5MB 或更大 | 5MB 或更大 |
| 与服务端通信 | 每次 HTTP 请求都会携带在 Header 中，影响带宽。 | 仅在客户端保存，不参与服务端通信。 | 仅在客户端保存，不参与服务端通信。 |
| 作用域 | 在所有同源窗口中共享。 | 在所有同源窗口中共享。 | 仅在当前窗口（标签页）中有效，不可跨窗口共享。 |
3. Web Storage API 用法
LocalStorage 和 SessionStorage 的 API 完全一致。
3.1 存储数据
数据只能以字符串形式存储。
javascript
// 存储字符串
localStorage.setItem('userName', 'John');
// 存储对象（需先序列化为 JSON 字符串）
const userInfo = { name: 'John', age: 25 };
localStorage.setItem('userInfo', JSON.stringify(userInfo));3.2 读取数据
javascript
const name = localStorage.getItem('userName');
// 读取对象并反序列化
const info = JSON.parse(localStorage.getItem('userInfo'));3.3 删除数据
javascript
// 删除指定项目
localStorage.removeItem('userName');
// 清空所有存储
localStorage.clear();4. 总结与建议
- Cookie：仅用于存储必要的会话标识（如 SessionID、Token），且应配合
HttpOnly提升安全性。 - LocalStorage：适用于存储用户偏好设置、缓存不常变动的非敏感数据。
- SessionStorage：适用于存储表单临时草稿、单次会话的状态信息。