浏览器客户端存储
浏览器中的持久/半持久数据机制总览，区分 Cookie、localStorage/sessionStorage、IndexedDB 与 Cache Storage 的数据模型、生命周期、网络行为和安全边界，并明确它们与 HTTP cache/BFCache 不同。
[!info] related notes
- 所属 MOC: 前端基础 MOC, 浏览器 JS MOC
- Cookie: Cookie vs LocalStorage, Cookie、Session、Token
- Cache: 浏览器缓存体系, Service Worker 与 Cache API
- Runtime state: 页面运行时状态
- 安全: XSS, CSRF
浏览器客户端存储
一句话定义
浏览器客户端存储不是一个统一 API，而是一组不同的数据容器。
选择时至少要看：
- 数据模型；
- 生命周期；
- 是否同步；
- 是否随 HTTP 自动发送；
- 容量/性能特征；
- 安全与 origin/site 边界。
Cookie
特点：
- 小型键值；
- 浏览器可按 Domain/Path/SameSite/Secure 等规则自动随 HTTP 请求发送；
- 可以 HttpOnly；
- 常用于 session credential。
Cookie 的独特之处不是“也能存字符串”，而是它与 HTTP request 自动携带机制深度绑定。
localStorage
特点：
- origin 范围键值存储；
- 跨 reload 持久；
- 同步 API；
- 不会自动随 HTTP 请求发送。
适合少量低频配置，不适合高频大量数据。
sessionStorage
与 localStorage 类似，也是同步键值 API，但生命周期更接近当前 top-level browsing context / tab session。
它不会因为普通 SPA 路由切换就自动消失。
IndexedDB
浏览器中的异步结构化数据库能力。
适合：
- 大量结构化本地数据；
- offline-first projection；
- 草稿/队列；
- 本地索引查询。
如果开始需要复杂 schema、事务和大量记录，IndexedDB 比 localStorage 更匹配。
Cache Storage
Cache Storage 存的是 Request / Response pair，通常和 Service Worker 配合。
它适合：
- 静态资源离线；
- programmable network cache；
- offline fallback。
它不是普通业务对象数据库。
与 HTTP Cache 不同
HTTP cache 由浏览器网络栈根据：
- Cache-Control；
- ETag；
- Last-Modified；
- Vary；
等协议语义自动管理。
Cache Storage 则由应用 / Service Worker 显式读写。
两者都能“缓存 response”，但 authority 和控制方式不同。
与页面运行时状态不同
React/Vue state、普通 JS object、DOM 状态存在于当前页面运行时。
刷新或整页导航后这些内存状态通常需要重新建立。
localStorage/IndexedDB 等则是外部持久层。
见 页面运行时状态。
安全边界
“存得到”不等于“应该存”。
需要考虑：
- XSS 是否能读取；
- credential 是否需要 HttpOnly；
- 第三方/跨站 storage restrictions；
- 多用户/多 tenant namespace；
- logout cleanup；
- 数据过期与 migration。
不要把长期 access credential 随意放进可被页面 JavaScript 读取的持久存储。
选型直觉
| 需求 | 优先考虑 |
|---|---|
| 随 HTTP 自动发送的小型 credential | Cookie |
| 少量简单前端配置 | localStorage |
| 当前 tab/session 临时键值 | sessionStorage |
| 大量结构化/offline 数据 | IndexedDB |
| Request/Response 离线缓存 | Cache Storage |
| HTTP 资源自动复用 | HTTP cache |
学习检查
- Cookie 与 localStorage 最关键的协议层差异是什么？
- 为什么 localStorage 的同步 API 不适合高频大量读写？
- sessionStorage 的“session”为什么不等于一次 SPA route？
- IndexedDB 与 Cache Storage 分别存什么抽象对象？
- Cache Storage 与 HTTP cache 的 authority 有什么不同？
- 为什么页面 state 与持久 storage 不能混为一谈？
- 给登录 credential、主题设置、离线任务列表、静态 bundle 四类数据分别选存储位置并说明理由。
Digital Biome