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

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

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

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

特点：

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

代码示例（资料5的HTTP响应）[^5]：

// 服务器设置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中的区别）^[1]：

适合存储 少量简单数据（如用户偏好设置），容量约 5MB/域名 ^[1][2]。同步操作，直接读写字符串。

核心方法

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

示例1：（资料3的存储限制）^[2]：

// 存储数据（最大约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');

⚠️ 注意事项：

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

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

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

特点（资料1中的描述）^[1]：

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

操作流程（资料4中的事务与游标）^[1][3]：

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();

优点：

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

三、如何选择？

三种存储方式对比

选择指南

1. 小且需自动发送的数据 → Cookie ^[1]
2. 中长期存储简单数据 → localStorage ^[2]
3. 大量结构化数据 → IndexedDB ^[1]

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

四、注意事项

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

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

脚注

1. 《JavaScript高级程序设计（第5版）》指出localStorage容量通常为5MB/域名 ↩ ↩ ↩ ↩ ↩ ↩ ↩ ↩

2. 《JavaScript高级程序设计（第5版）》说明IndexedDB按域名隔离且容量更大 ↩ ↩ ↩ ↩ ↩ ↩ ↩

3. 《JavaScript高级程序设计（第5版）》描述IndexedDB采用异步请求模型 ↩ ↩

4. 《JavaScript高级程序设计（第5版）》示例使用Dexie.js简化IndexedDB操作 ↩ ↩