浏览器客户端存储

浏览器里 Cookie、Web Storage、IndexedDB 与 Cache API 的分工概览。

#tech / dev / frontend #type / concept #status / growing

[!info] related notes

所属 MOC: 前端基础 MOC, javascript-in-browser-moc

上位主题: javascript-in-browser

相邻主题: window-object, browser-web-workers

相关概念: 浏览器缓存分类与 304 / memory cache / disk cache, Service Worker 与 Cache API, 页面运行时状态

安全: xss-cross-site-scripting, csrf

对比: cookie-vs-localstorage, cookie-session-token, jwt

浏览器客户端存储

浏览器客户端存储指的是页面在本地保存数据的几类机制。它们能力不同，重点差异通常是容量、生命周期、是否随请求发送，以及是否支持结构化数据。

快速分工

Cookie: 小容量、可随 HTTP 请求发送，常用于会话场景
localStorage: 简单键值对、持久化、同步 API
sessionStorage: 会话级键值对、标签页会话结束即失效
IndexedDB: 结构化、异步、大容量、本地数据库式能力
Cache API: 面向请求/响应缓存，常和 Service Worker 配合
HTTP 缓存: 资源请求复用，不是前端状态存储

选型直觉

需要跟请求一起发给服务端: Cookie
只是保存少量前端状态: localStorage / sessionStorage
需要离线数据或大量结构化数据: IndexedDB
需要缓存静态资源或网络响应: Cache API

注意事项

Cookie 容量小，且会放大请求体积
localStorage 是同步 API，频繁读写可能阻塞主线程
存储通常受同源策略约束
敏感信息不要因为“能存”就直接持久化

不要和页面运行时状态混为一谈

浏览器客户端存储和页面运行时状态不是一回事。

localStorage / sessionStorage 是浏览器提供的存储槽位
页面运行时状态是当前文档这一次运行里的 JS 内存、DOM 状态和临时 UI 现场

所以“整页跳转容易丢状态”时，通常主要丢的是后者，而不是说 sessionStorage 会立刻消失。

更完整的边界见：

页面运行时状态

放回浏览器运行时里看

浏览器总览：javascript-in-browser
全局入口：window-object