浏览器存储导读

在浏览器里谈「缓存」，通常有两层含义：一是 HTTP 缓存（由响应头 Cache-Control 等控制，浏览器磁盘/内存缓存静态资源）；二是 脚本可编程的客户端存储——Cookie、localStorage / sessionStorage、IndexedDB、Cache Storage（配合 Service Worker）。本词条侧重后者：同源策略下的持久化与容量分工。桌面端容量为经验量级，Safari 私密浏览、存储配额不足时会抛错或静默失败，线上应对关键写入做 try/catch。

需要感知剩余空间时可用 navigator.storage.estimate()，返回 usage / quota（字节）；持久化目录还可配合 navigator.storage.persist() 询问是否允许「尽量不因空间紧张被清理」（用户或策略可能拒绝）。第三方嵌入场景下，浏览器会对 Cookie、存储等做 分区（partition）：即便第三方脚本同源，在不同顶级站点下也会隔离，避免跨站追踪。

---

能力对照（速览）

下列字段在不同浏览器、模式下略有浮动，对比用于选型而非精确容量承诺。

机制	大致容量	生命周期	是否随请求发送	典型用途
Cookie	~4KB（单条不宜过大）	可由 Expires/Max-Age 控制	同站请求可携带（受 Path/Domain/SameSite 约束）	会话标识、CSRF Token、少量偏好
localStorage	约数 MB 级	除非手动清除否则长期保留	否	主题、向导进度、非敏感配置
sessionStorage	约数 MB 级	标签页关闭即清空	否	单次会话表单、临时向导状态
IndexedDB	较大（配额管理）	持久，直至删除	否	离线业务数据、大量结构化对象
Cache API（Cache Storage）	配额内	由 SW 版本与清理策略控制	否	缓存 Request/Response，离线资源

同源：协议 + 主机 + 端口 一致方可读写同一套存储（Cookie 的 Domain 规则略宽，可被子域单独约定）。

---

各存储怎么用、用在哪（摘录）

Cookie：最初用于在客户端存储会话信息，服务器通过 Set-Cookie 响应头设置，浏览器之后每次请求都会自动携带。
由于其每次请求都会携带的特性，不要将大数据存储在 Cookie 中，否则会导致性能浪费。此外，需注意设置 HttpOnly 属性来防范 XSS 攻击。
使用场景：用户 session 登录、埋点记录用户行为

# localStorage 使用场景
localStorage：HTML5 提供的本地存储方案，除非手动清除，否则数据会长期保留。
同源策略：只有协议、域名、端口完全相同的页面才能共享数据。只能存储字符串
使用场景：用来存储长期稳定的前端数据、如主题配置

# sessionStorage 使用场景
sessionStorage：与会话（Session）相关，但这里的“会话”特指浏览器标签页的生命周期
同源但不同页签不共享：这是它与 localStorage 最核心的行为差异
使用场景：用来存储敏感的一次性数据，如表单数据恢复

# indexedDB 使用场景
indexedDB：浏览器提供的非关系型数据库（NoSQL），用于在客户端存储大量结构化数据。
异步操作、支持索引、存储丰富类型
使用场景：开发一个支持离线的应用、大数据缓存、存富文本和图片

# 总结
cookie：小、自动带、可 httpOnly、防 CSRF/XSS，适合登录态
localStorage：5M、永久、同源共享、同步、适合简单持久化
sessionStorage：关标签就没、适合临时页面数据
indexedDB：大量数据、异步、事务、离线应用
Cache API：缓存请求资源、配合 ServiceWorker 离线

---

速查问答

# 1. 什么是 httpOnly cookie？
JS 无法通过 document.cookie 访问 httpOnly cookie，只能浏览器自动携带，防止 XSS 窃取 cookie

# 2. sameSite cookie 作用？
防止 CSRF 跨站请求伪造
Strict：完全不跨站携带
Lax：大部分情况不跨站，a 标签跳转例外
None：跨站可发送，但必须配合 secure 和 https

# 3. indexedDB 是什么，适用场景？
浏览器端大型 NoSQL 数据库
异步、支持事务、可存储大量结构化数据
支持文件、对象、索引查询
场景：PWA 离线存储、大量业务数据、复杂查询缓存

# 4. Cache API 是什么？
用于缓存 Request/Response
主要给 ServiceWorker 做离线缓存
缓存静态资源、接口返回
异步、批量管理、按版本清理
不适合存普通业务数据，适合资源缓存

# 5. indexedDB 和 Cache API 区别？
IndexedDB：存业务数据、对象、列表，支持复杂查询
Cache API：缓存网络请求（js/css/img/api），配合离线应用

# 6. 如何让 localStorage 实现过期？
自己封装：存的时候带上时间戳，取的时候判断当前时间是否过期

# 7. 为什么不建议用 localStorage 存 token？
容易被 XSS 攻击窃取，不会自动携带，需要手动加在 header，大型项目推荐加解密转化

# 8. 浏览器存储满了会怎样？
写入会抛出 QuotaExceededError
所以实际项目要加 try/catch

---

拓展笔记

# Cookie 的 Max-Age=0（或 Expires 设为过去时间）会怎样？
通常表示删除该 Cookie；具体以浏览器实现为准，不要依赖「窗口关闭」语义（session Cookie 另由服务端不设过期等方式区分）。

---

本分目录文献索引

主题	文档
Cookie 与 Web Storage	Cookie / localStorage / sessionStorage
IndexedDB 与 Cache API	IndexedDB + Cache Storage
内存模型（非持久化存储）	JS 堆栈对比
多线程与离线	WebWorker、PWA 与 Service Worker