javascript IndexedDB是什么_如何存储大量结构化数据？-js教程-PHP中文网

indexeddb 是浏览器内置的事务型 nosql 数据库，支持结构化存储、索引查询、异步操作和大容量持久化，适合离线应用与大数据缓存；使用需遵循打开数据库、创建对象仓库、建索引、事务内操作的流程，并注意分批写入、版本升级与错误处理。

javascript indexeddb是什么_如何存储大量结构化数据？

IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库，专为在客户端存储大量结构化数据而设计。它比 localStorage 更强大：支持索引、查询、增删改查、事务控制，且容量通常达数百 MB（具体取决于浏览器和用户设置），适合离线应用、缓存大数据集或暂存用户生成内容。

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

核心特点：为什么选 IndexedDB 而不是 localStorage？

• 结构化存储：可存对象、数组、文件（Blob）、二进制数据（ArrayBuffer），不强制转字符串；
• 索引驱动查询：通过创建索引，能按任意字段快速查找（比如按 user_id 或 created_at 查）；
• 事务保障一致性：读写操作包裹在事务中，失败自动回滚，避免数据错乱；
• 异步非阻塞：所有 API 均基于 Promise 或事件回调，不会卡住页面；
• 持久化+可扩容：数据默认持久保存（除非用户清除），空间远大于 localStorage 的 5–10 MB 限制。

基本使用流程：打开库 → 创建对象仓库 → 增删改查

• 打开数据库：调用 indexedDB.open(name, version)，监听 onupgradeneeded 创建/升级结构；
• 定义对象仓库（Object Store）：相当于一张表，需指定主键（keyPath）和是否自增（autoIncrement）；
• 添加索引：在 upgradeneeded 中对常用查询字段调用 store.createIndex(name, keyPath)，例如 createIndex('byStatus', 'status')；
• 执行操作：在事务中获取 store，用 add()、put()、get()、delete()、openCursor() 等方法操作数据。

存大量数据时的关键实践

• 分批写入：单次事务别塞上千条记录，建议每批 100–500 条，避免长时间阻塞或触发浏览器中断；
• 关闭游标及时释放资源：用 cursor.continue() 遍历时，不要让游标长期挂起；
• 合理设计主键和索引：主键尽量用业务唯一 ID（如 id 字段），高频查询字段必须建索引，但别滥用（索引也占空间、拖慢写入）；
• 注意版本升级逻辑：修改结构（新增字段、索引）必须提升 version，并在 onupgradeneeded 中处理迁移，旧版本数据库不会自动更新；
• 错误要监听并反馈：给 request 对象加 onerror，事务加 onabort/oncomplete，方便调试和兜底。

一个极简示例：存用户列表并按邮箱查

```js
const dbPromise = indexedDB.open('userDB', 1);
dbPromise.onupgradeneeded = e => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    store.createIndex('byEmail', 'email', { unique: true }); // 支持按邮箱查
  }
};
dbPromise.onsuccess = e => {
  const db = e.target.result;
  // 插入一条
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').add({ name: '张三', email: 'z3@example.com' });
  // 按邮箱查
  const req = tx.objectStore('users').index('byEmail').get('z3@example.com');
  req.onsuccess = () => console.log(req.result); // { id: 1, name: '张三', email: 'z3@example.com' }
};
```