存储

问题：HTTP 无状态，客户端数据怎么持久化？

没有客户端存储：
  用户登录 → 关闭浏览器 → 再打开 → 不认识了

解决：按需求选择存储方案

  Cookie：每次请求自动携带 → 身份认证
  LocalStorage：永久存储 → 用户偏好、缓存
  SessionStorage：标签页隔离 → 表单暂存
  IndexedDB：大量结构化数据 → 离线应用、大文件缓存

┌───────────────────────────────────────┐
│  1. 服务器设置 Cookie                  │  ← Set-Cookie 响应头
└─────────────────┬─────────────────────┘
                  │ 浏览器保存
                  ▼
┌───────────────────────────────────────┐
│  2. 浏览器存储 Cookie                  │  ← 按域名、路径、过期时间存储
└─────────────────┬─────────────────────┘
                  │ 下次请求时
                  ▼
┌───────────────────────────────────────┐
│  3. 浏览器自动携带 Cookie              │  ← Cookie 请求头
└───────────────────────────────────────┘

Set-Cookie: session=abc123; Max-Age=3600; Path=/; SameSite=Lax; Secure; HttpOnly

// 前端可读写非 HttpOnly 的 Cookie，也能设置 Secure / SameSite
document.cookie = "name=Tom; max-age=3600; path=/; SameSite=Lax; Secure";
console.log(document.cookie); // "name=Tom; other=xxx"

// 只有 HttpOnly 无法由 JS 设置或读取，必须由服务端在 Set-Cookie 中声明

// IndexedDB 的基本操作
const request = indexedDB.open("myDB", 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // 创建对象存储（类似表）
  const store = db.createObjectStore("users", { keyPath: "id" });
  // 创建索引
  store.createIndex("email", "email", { unique: true });
};

request.onsuccess = (e) => {
  const db = e.target.result;
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");

  // 写入数据
  store.put({ id: 1, name: "Tom", email: "tom@example.com" });

  // 读取数据
  const getReq = store.get(1);
  getReq.onsuccess = () => console.log(getReq.result);
};

// 用 idb 库简化 API
import { openDB } from "idb";
const db = await openDB("myDB", 1, {
  upgrade(db) {
    db.createObjectStore("users", { keyPath: "id" });
  },
});
await db.put("users", { id: 1, name: "Tom" });
const user = await db.get("users", 1);

// Chromium 的存储后端架构：
// StoragePartitionImpl 管理所有存储后端

// LocalStorage：底层用 LevelDB，按 origin 隔离
// 每个 origin 一个独立的 LevelDB 数据库
// 读写操作在渲染进程的主线程执行（同步 API）

// IndexedDB：底层也用 LevelDB，支持事务和索引
// 读写操作在独立的线程执行（异步 API）
// 支持 Blob 和二进制数据

// Cache Storage：Service Worker 使用
// 独立于浏览器缓存，由 Cache API 控制

// 存储配额管理：
// - LocalStorage：每个 origin 约 5MB
// - IndexedDB：由 Quota 系统统一管理，单源配额随磁盘容量动态调整
// - Cache Storage：与 IndexedDB 共享同一配额池
// - 单源总配额：Chrome 中通常不超过磁盘总量的约 60%

// 查询已用空间和配额：
// navigator.storage.estimate().then(estimate => {
//   console.log('已用:', estimate.usage);
//   console.log('配额:', estimate.quota);
// });

// 存满时的行为：
// LocalStorage.setItem() 抛 QuotaExceededError
// IndexedDB 事务抛 QuotaExceededError
// 可以用 StorageManager.persist() 申请持久化存储