🧠 浏览器存储笔记

✍️ 作者：桑榆
🕓 更新时间：2025-11-04
🧠 关键词：浏览器存储、localStorage、sessionStorage

一、概述

浏览器除了 缓存（Cache） 外，还提供多种 本地存储方式 来保存数据。
这些存储机制主要包括：

• Cookie
• LocalStorage
• SessionStorage
• IndexedDB
• （以及现代应用中的 Cache Storage / Service Worker Cache）

它们共同作用于前端数据持久化、状态保存、离线访问等场景，但在容量、生命周期、安全性和与服务器的交互方式上有显著区别。

二、主要存储机制对比表

特性	Cookie	LocalStorage	SessionStorage	IndexedDB
主要用途	保存少量状态（登录、会话）	长期存储用户数据	临时存储当前会话数据	存储大量结构化数据
数据大小	约 4KB	~5MB	~5MB	数百 MB（取决于浏览器）
数据类型	字符串	字符串	字符串	任意类型（对象、二进制等）
有效期	可设置过期时间	永久保存	关闭标签页即清除	永久保存
作用域	域名、路径	同源（协议 + 域名 + 端口）	同源 + 当前标签页	同源
是否随请求发送	✅ 是（每次 HTTP 请求）	❌ 否	❌ 否	❌ 否
访问方式	document.cookie	localStorage	sessionStorage	异步 API (indexedDB)
安全性	较低（易受 XSS / CSRF 攻击）	较高（仅前端可读）	较高	高（沙盒隔离）
可存储结构化数据	❌ 否	❌ 否	❌ 否	✅ 是
适合场景	登录态、用户标识	用户偏好、本地缓存	表单临时数据	离线应用、大数据存储

---

三、Cookie 🍪

📌 特点

• 最早的浏览器存储机制；
• 由服务器通过 HTTP 响应头 Set-Cookie 设置；
• 每次请求自动携带在 Cookie 请求头中；
• 适用于 服务器会话识别（如 session_id）。

⚙️ 示例

// JS 设置 Cookie
document.cookie = "username=Tom; path=/; expires=Fri, 31 Dec 2025 23:59:59 GMT";

// 服务端设置 Cookie (HTTP Header)
Set-Cookie: username=Tom; Path=/; Expires=Fri, 31 Dec 2025 23:59:59 GMT;

🔒 安全建议

• 使用 HttpOnly 防止 JS 读取；
• 使用 Secure 限制 HTTPS；
• 使用 SameSite 防 CSRF 攻击。

四、LocalStorage 🗂️

📌 特点

• HTML5 引入；
• 永久存储，除非主动清除；
• 不随请求发送；
• 适合存储用户偏好、主题配置、缓存数据。

⚙️ 示例

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.removeItem("theme");

🚫 注意

• 仅能存储 字符串；
• 同源限制（不同域名无法访问）；
• 容量约 5MB。

五、SessionStorage 🕒

📌 特点

• 与 LocalStorage 类似；
• 生命周期仅限于当前 浏览器标签页；
• 关闭标签页后即清除；
• 不同标签页之间不共享。

⚙️ 示例

sessionStorage.setItem("token", "abc123");
console.log(sessionStorage.getItem("token"));

💡 使用场景

• 表单暂存；
• 页面跳转时的临时参数；
• 单次登录流程数据。

六、IndexedDB 🧩

📌 特点

• 浏览器内置数据库；
• 支持对象存储、索引查询；
• 适合大量结构化数据存储；
• 异步操作（基于事件回调或 Promise）。

⚙️ 示例

const request = indexedDB.open("myDB", 1);
request.onsuccess = e => console.log("数据库打开成功");
request.onupgradeneeded = e => {
  const db = e.target.result;
  db.createObjectStore("users", { keyPath: "id" });
};

💡 使用场景

• 离线应用（PWA）；
• 大型本地数据存储；
• 前端数据库缓存。

七、Service Worker Cache 💾

• 属于 离线缓存体系；
• 管理 HTTP 响应的缓存；
• 可在无网络时加载页面；
• 通常与 PWA 配合使用。

⚙️ 示例

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open("my-cache").then(cache => {
      return cache.addAll(["/index.html", "/main.css"]);
    })
  );
});

八、不同存储机制的区别总结

分类	生命周期	数据大小	与服务器交互	可访问性	安全性
Cookie	可设置过期时间	4KB	自动随请求发送	JS 可读	低
LocalStorage	永久	~5MB	不发送	JS 读写	中
SessionStorage	当前会话	~5MB	不发送	JS 读写	中
IndexedDB	永久	上百 MB	不发送	JS 异步访问	高
Cache Storage	永久 / 可控	较大	不发送	仅通过 Service Worker 访问	高

九、使用建议

场景	推荐存储方式
登录状态 / Session ID	Cookie
用户偏好 / 主题 / 设置	LocalStorage
表单临时缓存	SessionStorage
离线数据 / 大量结构化信息	IndexedDB
静态资源缓存	Service Worker Cache

---

十、安全与性能建议

1. 敏感信息加密存储

   • 不要明文保存 Token、密码；
   • 可以用 AES、RSA 等加密。

2. 避免过度使用 LocalStorage

   • 频繁读写会影响性能；
   • 大量数据建议转 IndexedDB。

3. Cookie 安全策略

   • 设置 HttpOnly、Secure、SameSite；
   • 限制作用路径（Path）。

4. 缓存与存储区分

   • Cache 侧重“资源加载加速”，
   • Storage 侧重“数据持久化”。