红宝书第二十五讲：客户端存储（Cookie、localStorage、IndexedDB）：浏览器里的“记忆盒子”

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、Cookie：小容量“便利贴”

特点：

存储量小：约4KB（资料1提到）¹
自动随请求发送：每次请求都会携带Cookie，如登录Token
手动设置过期时间：否则关闭浏览器失效（资料5中的HTTP头Set-Cookie）²

代码示例（资料5的HTTP响应）²：

// 服务器设置Cookie（HTTP响应头）
HTTP/1.1 200 OK
Set-Cookie: user_token=abc123; Expires=Wed, 21 Oct 2025 07:28:00 GMT

// JavaScript操作Cookie（写入）
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

适用场景：存储会话ID、用户基础标识。

二、localStorage & sessionStorage：文件柜式存储

对比（资料1中的区别）¹：
| 类型 | 生命周期 | 共享范围 |
|----------------|-------------------------|--------------|
| localStorage | 永久存储（手动删除才消失） | 同域名下所有页面 |
| sessionStorage | 关闭标签页即消失 | 仅当前标签页 |
适合存储 少量简单数据（如用户偏好设置），容量约 5MB/域名 ¹³。同步操作，直接读写字符串。

核心方法

存数据 → localStorage.setItem(key, value)
取数据 → localStorage.getItem(key)
删数据 → localStorage.removeItem(key)

示例1：（资料3的存储限制）³：

// 存储数据（最大约5MB）
localStorage.setItem("theme", "dark");  
// 读取数据
const theme = localStorage.getItem("theme"); // "dark"

// sessionStorage用法相同
sessionStorage.setItem("tempData", "仅保存到标签关闭");

示例2：保存用户主题偏好

// 点击切换深色模式时保存
function toggleDarkMode() {
  const isDark = document.body.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// 页面加载时读取
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') document.body.classList.add('dark');

⚠️ 注意事项：

只能存储字符串，对象需用JSON.stringify()转换
同一域名下共享，不同域名数据隔离 ³

二、IndexedDB：浏览器里的“数据库”

适合存储 大量复杂数据（如应用缓存、用户订单记录），支持对象存储、事务和查询。容量可达 GB级 ¹³。

特点（资料1中的描述）¹：

结构化存储：类似SQL，可存复杂对象（如图片）
支持事务：操作更安全（如转账的原子性）
容量大：远超Cookie和Web Storage

操作流程（资料4中的事务与游标）¹⁴：

flowchart LR
    打开数据库 --> 创建对象仓库 --> 启动事务 --> 增删改查

核心概念

flowchart LR
    数据库(IndexedDB实例) --> 对象存储1(对象存储: Users)
    数据库 --> 对象存储2(对象存储: Orders)
    对象存储1 --> 索引1(索引: userId)
    对象存储2 --> 索引2(索引: orderDate)

示例3：：

// 1. 打开或创建数据库
const request = indexedDB.open("myDatabase", 1);

// 2. 创建对象仓库（类似表）
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore("users", { keyPath: "id" });
};

// 3. 插入数据
db.transaction("users", "readwrite")
  .objectStore("users")
  .add({ id: 1, name: "Alice", age: 30 });

示例4：使用Dexie.js简化操作

// 初始化数据库（举例）
const db = new Dexie("MyAppDB");
db.version(1).stores({
  users: "++id, name, email", // 自增id，索引name和email
  notes: "id, content, createdAt"
});

// 添加用户
await db.users.add({ name: "小明", email: "xiaoming@example.com" });

// 根据email查询
const user = await db.users.where("email").equals("xiaoming@example.com").first();

优点：

异步操作不阻塞页面 ⁴
支持复杂查询和索引（比localStorage快得多）
存储结构灵活（对象、文件等）

三、如何选择？

三种存储方式对比

| 特性 | Cookie | localStorage | IndexedDB |
|----------------|-------------------------|---------------------|------------------|
| 容量 | ~4KB | ~5MB | 数百MB，域名隔离，最高GB级 ³ |
| 数据发送 | 每次请求自动携带 | 不自动发送 | 不自动发送 |
| 数据结构 | 字符串 | 字符串 | 结构化对象/二进制 |
| 复杂度 | 简单 | 简单 | 高（需要事务管理，推荐用Dexie.js²） |
| 适用场景 | 用户标识 | 偏好设置/临时数据（按key查） | 离线应用/复杂数据（支持索引、排序和范围查询） |

选择指南

小且需自动发送的数据 → Cookie ¹
中长期存储简单数据 → localStorage ³
大量结构化数据 → IndexedDB ¹

flowchart TD
    A[需要存少量用户标识?] -->|是| B[Cookie]
    A -->|否| C{数据量大且复杂?}
    C -->|是| D[IndexedDB]
    C -->|否| E[localStorage/sessionStorage]

四、注意事项

域名隔离：同一个域名下的存储数据其他域名无法访问 ³
浏览器限制：本地文件（file://）可能无法使用IndexedDB（建议用Chrome测试）²
清除数据：用户可通过浏览器设置手动清除

上篇文章：红宝书第二十四讲：详解BOM对象：window、location、history

脚注

《JavaScript高级程序设计（第5版）》指出localStorage容量通常为5MB/域名 ↩
《JavaScript高级程序设计（第5版）》示例使用Dexie.js简化IndexedDB操作 ↩
《JavaScript高级程序设计（第5版）》说明IndexedDB按域名隔离且容量更大 ↩
《JavaScript高级程序设计（第5版）》描述IndexedDB采用异步请求模型 ↩

红宝书第二十五讲：客户端存储（Cookie、localStorage、IndexedDB）：浏览器里的“记忆盒子”