IndexedDB 是浏览器内置的一种低级 API，用于在客户端存储大量结构化数据。它允许你创建具有丰富查询能力的 Web 应用，无论应用是在线还是离线状态都能正常运行。

核心特点

大容量存储：不同于 localStorage (通常限制在 5MB)，IndexedDB 的存储限额通常取决于设备的可用磁盘空间（现代浏览器通常允许存储数百 MB 甚至数 GB 的数据，约为磁盘空间的 50%）。
异步操作：所有操作都是异步的，不会阻塞浏览器的主线程，这对于处理大量数据时保持 UI 流畅至关重要。
支持事务 (Transactions)：类似传统数据库，IndexedDB 的操作基于事务，确保数据的原子性、一致性和隔离性。如果事务中的任何一步失败，整个事务可以回滚。
键值对与索引：数据存储为键值对（Key-Value），但值可以是复杂的结构化对象（包括二进制数据如 Blob/File）。你可以为对象仓库（Object Store）创建索引，从而实现高效的查询和排序。
同源策略：遵循浏览器的同源策略，每个域名下的 IndexedDB 数据是隔离的。

与其他存储方式的对比

特性	Cookie	LocalStorage / SessionStorage	IndexedDB	Cache API
容量	~4KB	~5MB	极大 (GB 级)	极大 (受配额管理)
数据类型	字符串	字符串	任意 JS 对象 (含二进制)	Request/Response 对象
操作方式	同步 (阻塞)	同步 (阻塞)	异步 (非阻塞)	异步
查询能力	弱 (仅按名)	弱 (仅按名)	强 (支持索引、范围查询)	弱 (主要按 URL)
主要场景	身份验证、追踪	简单配置、小量缓存	离线应用、复杂数据、多媒体缓存	网络资源缓存 (PWA)

基本使用流程

IndexedDB 的原生 API 较为底层，通常包含以下步骤：

打开/升级数据库：使用 indexedDB.open(name, version)。如果版本号高于当前版本，会触发 onupgradeneeded 事件，在此处定义对象仓库（表）和索引。
开启事务：使用 db.transaction([stores], mode)，模式可以是 readonly 或 readwrite。
获取对象仓库：从事务中获取 objectStore。
执行操作：调用 add, put, get, delete, openCursor 等方法。
处理结果：通过监听请求的 onsuccess 和 onerror 事件获取结果。

const request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 创建一个名为 "users" 的对象仓库，keyPath 为 "id"
  if (!db.objectStoreNames.contains("users")) {
    const objectStore = db.createObjectStore("users", { keyPath: "id" });
    // 创建索引以便按 name 查询
    objectStore.createIndex("name", "name", { unique: false });
  }
};

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

  // 添加数据
  const user = { id: 1, name: "Alice", age: 30 };
  const addRequest = store.add(user);

  addRequest.onsuccess = () => console.log("数据添加成功");
  
  // 查询数据
  const getRequest = store.get(1);
  getRequest.onsuccess = (e) => console.log("查询结果:", e.target.result);
};

浏览器本地存储（IndexedDB）

核心特点

与其他存储方式的对比

基本使用流程

评论0