浏览器存储完全指南：Cookie、Web Storage 与 IndexedDB
浏览器存储是 Web 应用中不可或缺的一部分，它允许我们在客户端保存数据，从而提升用户体验、实现离线功能以及优化性能。本文将深入介绍三种主要的浏览器存储机制：Cookie、Web Storage 和 IndexedDB。
概览对比
| 特性 | Cookie | Web Storage | IndexedDB |
| 存储容量 | 约 4KB | 约 5-10MB | 无硬性限制（通常 > 50MB） |
| 数据类型 | 字符串 | 字符串 | 几乎所有 JS 类型 |
| 与服务器通信 | 自动随请求发送 | 否 | 否 |
| API 复杂度 | 低（但需手动解析） | 低 | 高（异步事务） |
| 适用场景 | 会话管理、用户偏好 | 简单键值存储 | 大量结构化数据 |
一、Cookie
1.1 概念
Cookie 是服务器发送到用户浏览器的一小段数据。浏览器会存储这些数据，并在后续请求中自动将其发送回同一服务器。Cookie 主要用于：
- 会话管理：登录状态、购物车、游戏分数等
- 个性化：用户偏好、主题设置等
- 追踪：记录和分析用户行为
1.2 创建与读取
服务端设置（HTTP 响应头）：
Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict客户端设置（JavaScript）：
1.3 Cookie 属性
| 属性 | 说明 |
Expires / Max-Age | 过期时间。未设置则为会话 Cookie，浏览器关闭即删除 |
Domain | 指定哪些域名可以接收该 Cookie |
Path | 指定 URL 路径，该路径必须存在于请求的 URL 中 |
Secure | 仅通过 HTTPS 发送 |
HttpOnly | 禁止 JavaScript 访问，防止 XSS 攻击 |
SameSite | 控制跨站请求时是否发送，可选值：Strict、Lax、None |
1.4 安全考量
⚠️
安全最佳实践：
- 敏感 Cookie 务必设置
HttpOnly和Secure - 使用
SameSite=Strict或SameSite=Lax防止 CSRF 攻击 - 避免在 Cookie 中存储敏感信息（如密码）
- 定期轮换会话标识符
二、Web Storage API
Web Storage 提供了比 Cookie 更直观的键值对存储机制，包括 localStorage 和 sessionStorage 两种。
2.1 localStorage vs sessionStorage
| 特性 | localStorage | sessionStorage |
| 生命周期 | 永久存储，除非手动清除 | 仅在当前会话（标签页）有效 |
| 作用域 | 同源所有标签页共享 | 仅当前标签页 |
| 存储限制 | 约 5-10MB | 约 5-10MB |
2.2 API 使用
2.3 存储对象数据
Web Storage 只能存储字符串，存储对象需要序列化：
2.4 storage 事件
当 Storage 发生变化时，同源的其他窗口会收到 storage 事件：
💡
注意：
storage 事件只会在其他同源窗口/标签页触发，不会在当前触发变化的窗口触发。这使其成为跨标签页通信的有效方式。三、IndexedDB
IndexedDB 是一个低级 API，用于在客户端存储大量结构化数据（包括文件和二进制数据）。它是一个事务型数据库系统，使用索引实现高性能搜索。
3.1 核心概念
- 数据库（Database）：存储数据的容器，每个源可有多个数据库
- 对象存储（Object Store）：类似于关系数据库中的"表"
- 索引（Index）：用于快速查询对象存储中的数据
- 事务（Transaction）：所有数据操作都在事务中进行，保证数据一致性
- 游标（Cursor）：用于遍历对象存储中的多条记录
3.2 打开/创建数据库
3.3 CRUD 操作
3.4 使用索引查询
3.5 使用游标遍历
3.6 Promise 封装
IndexedDB 基于事件的 API 较为繁琐，推荐使用 Promise 封装或第三方库：
📦
推荐库：
- idb - 轻量级 Promise 封装
- Dexie.js - 功能丰富的 IndexedDB 封装库
- localForage - 统一的存储 API
四、存储限制与清理策略
4.1 存储配额
浏览器对每个源的存储空间有限制：
- Chrome/Edge：硬盘可用空间的 60%
- Firefox：硬盘可用空间的 50%，最大 2GB
- Safari：约 1GB
可通过 Storage API 查询配额：
4.2 数据清理
当存储空间不足时，浏览器可能会自动清理数据（LRU 策略）。可请求持久化存储：
五、最佳实践
选择合适的存储方案
通用建议
- Cookie：仅存储必要的会话信息，设置适当的安全属性
- Web Storage：适合存储用户偏好、缓存简单数据
- IndexedDB：适合离线应用、大量数据、需要复杂查询的场景
- 始终处理存储异常：存储可能被禁用或已满
- 敏感数据加密：浏览器存储对用户透明，敏感数据应加密存储