一文教你搞懂sessionStorage、localStorage、cookie、indexedDB

引言

在前端开发中，浏览器提供了多种本地存储方式，例如 localStorage、sessionStorage 和 IndexedDB。它们能让我们把部分数据保存在用户浏览器端，从而减少与服务器的交互，提升应用的响应速度，并且在网络状况不佳时依旧能维持基本的使用体验。

然而，这些存储机制如果使用不当，会带来隐患：比如过度依赖 localStorage 存放敏感信息，可能引发安全问题；频繁无序地写入数据，会导致存储混乱甚至性能下降；或者没有清理策略，造成用户浏览器空间被大量占用。

相反，如果使用得当，则可以带来显著收益：页面打开更快、用户体验更流畅、离线状态下依旧可用，甚至还能实现类似"小型数据库"的功能，帮助前端在复杂应用中承担更多逻辑。

因此，用不好 → 安全隐患、数据不同步、性能下降；用好 → 性能优化、用户体验提升、支持离线能力。这正是前端工程师需要掌握这些浏览器存储技术的关键原因。

sessionStorage

什么是 sessionStorage

浏览器提供的每个标签页独享的键值存储（同源内共享）。
生命周期 ：创建 → 刷新/前进后退仍在 → 关闭该标签页或窗口即清空（或被代码/用户清除）。
不随请求发送到服务器（和 Cookie 不同）。
容量：约 ~5MB/源（不同浏览器略有差异）。

作用域与隔离

同源 + 同标签页共享：同一标签页内的所有同源页面共享一个 sessionStorage。
不同标签页 彼此隔离；新开标签（即使同 URL）也有全新的 sessionStorage。
通过 window.open() 打开的同源页，起始内容会被克隆一份，但之后互不影响。
storage 事件：sessionStorage 不会跨标签页广播变更（因为不共享）。在当前页变更也通常不会触发监听器去"同步别的页"。

适合

表单临时状态（页面刷新不丢失）
向导/多步流程的中间数据（每个标签页互不干扰）
单次会话内的缓存（如本页拉过的列表、分页位置）

不适合

任何敏感信息（明文可读，易被 XSS 窃取）
需要跨标签页/长期持久的数据（用 localStorage/IndexedDB）
大量/结构化数据（用 IndexedDB）

常见坑

超配额 会抛 QuotaExceededError：用 try/catch 捕获。
类型丢失 ：没做 JSON 序列化会变成字符串 [object Object]。
同步 API：频繁大量写入会阻塞主线程；控制写入频率与体积。
Safari/移动端：隐私模式/内存压力下可能更严格，注意兜底（失败时退回内存变量）。

localStorage

什么是 localStorage

浏览器提供的同源共享的键值对存储（Key-Value）。
持久化 ：关闭页面/浏览器后仍保留，直到被代码或用户清除（或清站点数据）。
仅前端可见：不会随请求自动发给服务器（和 Cookie 不同）。
字符串存储：值一律按字符串保存（对象需 JSON 序列化）。

生命周期与作用域

生命周期 ：创建 → 刷新/切页仍在 → 手动清除/清站点数据 才消失。
作用域（Origin） ：协议+域名+端口三者相同才共享。
跨标签页：同源所有标签页/窗口共享同一份 localStorage。
第三方/隐私机制：现代浏览器在第三方 iframe、隐私/无痕模式下可能更严格或不可用。

适合

表单临时状态（页面刷新不丢失）
向导/多步流程的中间数据（每个标签页互不干扰）
单次会话内的缓存（如本页拉过的列表、分页位置）

不适合

任何敏感信息（明文可读，易被 XSS 窃取）
需要跨标签页/长期持久的数据（用 localStorage/IndexedDB）
大量/结构化数据（用 IndexedDB）

与 localStorage / Cookie 的关键区别

生命周期 ：sessionStorage 关标签就没；localStorage 长久保存；Cookie 取决于 Expires/Max-Age。
是否随请求发送：只有 Cookie 会自动带到请求里；sessionStorage/localStorage 都不会。
作用域 ：sessionStorage 是每标签页独享 ；localStorage 是同源所有标签共享。

常见坑

超配额 会抛 QuotaExceededError：用 try/catch 捕获。
类型丢失 ：没做 JSON 序列化会变成字符串 [object Object]。
同步 API：频繁大量写入会阻塞主线程；控制写入频率与体积。
Safari/移动端：隐私模式/内存压力下可能更严格，注意兜底（失败时退回内存变量）。

什么是 Cookie

一种由浏览器保存的 小块文本数据（通常不超过 4KB），由服务器或前端 JS 设置。
Cookie 会自动随同域请求被发送到服务器，用于身份识别、会话保持、用户偏好等。
每个 Cookie 都包含 键值对、域、路径、过期时间、安全属性等信息。

生命周期

会话 Cookie ：不设置 Expires 或 Max-Age，浏览器关闭即消失。
持久 Cookie：设置了过期时间，在过期前都会保留，即使浏览器关闭。
删除 Cookie：可设置一个过去的时间作为过期时间，或用户手动清除。

适合

Session ID、用户登录状态（结合 HttpOnly + Secure + SameSite）
必须随请求发送的小块状态

不适合

大量数据（容量小）
敏感信息（若没设置 HttpOnly，容易被 JS 读出）
高频更新数据（每次请求都会带上，浪费带宽）

Cookie 是小容量、随请求自动发送、适合会话管理 的存储方式；现代前端更多使用 localStorage / sessionStorage / IndexedDB 存储本地数据，而 Cookie 专注于"和服务器同步状态"

IndexedDB

什么是 IndexedDB

浏览器提供的 非关系型本地数据库（NoSQL），适合存储大量结构化数据。
面向对象的存储方式：数据存放在「对象仓库（Object Store）」里，而不是表格行列。
支持 索引、事务、游标，能实现接近数据库的查询与操作。
容量：可达数百 MB（甚至更大，具体取决于浏览器和用户设置）。

生命周期与作用域

生命周期：持久保存，除非被代码/用户/清站点数据手动删除。
作用域：基于同源策略（协议+域名+端口一致才共享）。
多标签页共享：同源下所有标签页可访问同一数据库。

特点

异步 API（不会阻塞主线程，基于事件回调或 Promise）。
事务：读写操作必须在事务中进行，保证原子性。
索引：可为字段建立索引，加快查询。

适用场景

离线应用：在无网络时保存数据，下次上线再同步。
大体量数据缓存：如文章列表、聊天记录、本地音乐缓存。
复杂数据结构：存储 JSON、二进制数据（如 Blob、文件）。
渐进式 Web 应用（PWA） ：结合 Service Worker 做完整离线方案。

对比

特点	Cookie	localStorage	sessionStorage	IndexedDB
生命周期	可设置过期时间；默认会话级别，关闭浏览器清除	永久保存，除非手动清除	会话级：关闭标签页/窗口清除	永久保存，除非手动清除
容量限制	~4KB 左右	~5MB	~5MB	可达数百 MB（依浏览器而定）
作用域	同源，且可配置路径；会随请求发送到服务器	同源	同源（同窗口/标签页）	同源
是否随请求发送	✅ 每次请求都会带上（增加带宽）	❌ 不会	❌ 不会	❌ 不会
可访问性	JS 可访问（除非设置 HttpOnly）；服务器也可读写	仅 JS 端可访问	仅 JS 端可访问	仅 JS 端可访问
适合场景	存储少量需随请求携带的信息（如 Session ID）	保存长期数据（主题、配置、token 等）	保存临时数据（表单状态、页面刷新不丢失）	保存大量结构化数据（离线应用、本地数据库）
安全性	容易被窃取；应结合 `HttpOnly` + `Secure` + `SameSite`	明文存储，易被 XSS 窃取，不建议存敏感信息	明文存储，易被 XSS 窃取，不建议存敏感信息	相对安全，支持事务，但依旧避免存敏感数据

结论

技术	生命周期	容量	特点	适合使用场景
Cookie	可设过期时间；会话级或持久	~4KB	每次请求都会自动携带到服务器；支持 HttpOnly / Secure / SameSite 安全属性	身份认证（Session ID、CSRF Token）、服务端需要的少量状态
sessionStorage	浏览器标签页/窗口关闭即清空	~5MB	同源、同标签页共享；不随请求发送；仅 JS 端可见	临时存储：表单数据、页面状态（刷新不丢）、单次会话流程
localStorage	永久保存，除非手动清除	~5--20MB	同源所有标签页共享；不随请求发送；同步 API，值为字符串	长期存储：主题、语言偏好、轻量缓存（如最近浏览）、跨标签页共享小数据
IndexedDB	永久保存，除非手动清除	可达数百 MB+	面向对象数据库，支持事务、索引、异步 API；结构化存储	复杂/大量数据：离线应用、大体量缓存（文章、消息）、需要查询的结构化数据