当前位置：首页 > news >正文

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

news 2025/7/11 13:01:43

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

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

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

特点：

存储量小：约4KB（资料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中的区别）¹：

类型	生命周期	共享范围
`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中的事务与游标）¹³：

核心概念

示例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查）	离线应用/复杂数据（支持索引、排序和范围查询）