人人都会AI编程

结构化存储、大容量、异步特性

更新时间：2026-07-11

当 localStorage 和 sessionStorage 的 5MB 容量天花板碰到瓶颈，或者你需要存储复杂数据结构（如嵌套对象、数组、二进制数据）并支持高效查询时，IndexedDB 就派上了用场。它是浏览器提供的真正意义上的本地数据库，设计初衷就是处理大量结构化数据的持久化存储。

结构化存储：可以存对象，还能建索引

Web Storage 只能存字符串，你不得不手动 JSON.stringify 和 JSON.parse。IndexedDB 直接支持 JavaScript 对象，包括 Object、Array、Date、Blob、File 等，不需要反复序列化。同时，IndexedDB 是基于索引的数据库，你可以为对象的某个属性创建索引，然后像查询数据库一样根据索引快速检索，而不用遍历所有记录。

假设你正在做一个离线笔记应用，每条笔记包含标题、内容、标签数组和修改时间：

const note = {
  id: 'note-001',
  title: '待办事项',
  content: '买牛奶、写文章',
  tags: ['工作', '个人'],
  updatedAt: new Date()
};

存入 IndexedDB 时，可以给 title、tags、updatedAt 分别建立索引，之后就能高效执行：

  • 按标题关键字搜索（通过索引 + 游标过滤）；
  • 查找包含某个标签的所有笔记（多值索引）；
  • 按修改时间倒序排列获取最新笔记。

相比之下，如果改用 localStorage，这些查询只能靠手动遍历全部记录，随着数据量变大，性能会急剧下降。

大容量：几百 MB 甚至更多，按需申请

Web Storage 的硬限制通常是 5MB，超过即抛异常。IndexedDB 没有固定上限，浏览器通常允许占用总磁盘空间的一定比例（各浏览器策略不同，但几百 MB 到几 GB 都是常见范围），并且可以动态申请更多配额。对于离线 PWA、缓存大量资源、存储用户生成内容（如草稿箱、离线地图数据）等场景，这个容量差异决定了选型。

需要明确的是：大容量不代表随便塞。数据越大，读写越慢，用户也可能因为存储占用过高而清理站点数据。建议存储真正需要本地的关键数据，并遵守存储配额管理 API（如 navigator.storage.estimate()）监控用量。

异步特性：操作不阻塞主线程

这是 IndexedDB 与 Web Storage 最本质的差异之一。localStorage.setItem() 是同步操作，写入较大数据时会导致页面卡顿，用户交互不响应。IndexedDB 的所有操作（打开数据库、增删改查）都是异步的，基于事件回调或 Promise 封装（新版支持 indexedDB.databases() 等 Promise 风格），不会阻塞主线程，这对保证 UI 流畅至关重要。

异步也带来了一点心智成本：操作不会立即返回结果，需要通过 onsuccess 事件或 await 获取。例如，存入一条记录后，你得在成功回调里拿到自动生成的 key，而不能直接赋值给变量。许多开发者会使用 idb 这类封装库，将 IndexedDB 的回调地狱转换为现代 async/await 风格，大幅提升可读性。

// 使用 idb 库的 Promise 风格示例
import { openDB } from 'idb';

const db = await openDB('my-notes', 1, {
  upgrade(db) {
    const store = db.createObjectStore('notes', { keyPath: 'id' });
    store.createIndex('by-title', 'title');
    store.createIndex('by-tags', 'tags', { multiEntry: true });
    store.createIndex('by-time', 'updatedAt');
  }
});

// 添加笔记
await db.add('notes', note);

// 按标签查询
const notesWithTag = await db.getAllFromIndex('notes', 'by-tags', '工作');

实际适用场景与权衡

  • 适合 IndexedDB：离线 Web 应用（如邮箱客户端、文档编辑器）、需要存储大量用户生成内容（笔记、草稿）、需要高性能查询的数据集、缓存 API 响应用于离线可用。
  • 不适合 IndexedDB：简单键值对存储（localStorage 更方便）、仅需短期会话级别数据（sessionStorage 即可）、对 API 的复杂度敏感且数据量极少的小项目。

IndexedDB 的学习曲线明显高于 Web Storage，但一旦掌握，它能为你打开一扇真正的“浏览器端数据库”大门，让 Web 应用在离线能力、性能和数据管理上逼近原生体验。