浏览器存储完全指南: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:适合离线应用、大量数据、需要复杂查询的场景
- 始终处理存储异常:存储可能被禁用或已满
- 敏感数据加密:浏览器存储对用户透明,敏感数据应加密存储