IndexedDB 通过对象存储、索引和事务机制高效管理结构化数据,支持原生类型、字段查询与分页;需在 onupgradeneeded 中建模,合理设主键与索引,批量写入须分批复用事务,读取优先用索引游标,版本升级需手动迁移数据。

JavaScript 浏览器对象通过 IndexedDB 存储大量结构化数据,核心在于利用其对象存储(Object Store)、索引(Index)和事务(Transaction)机制,而非简单序列化后塞进 localStorage。它天然支持原生 JavaScript 对象、数组、Date、Blob、ArrayBuffer 等类型,无需手动 JSON.stringify / parse,且能按字段高效查询、分页遍历、批量写入。
定义数据库结构:onupgradeneeded 是唯一建模时机
数据库版本升级或首次创建时,onupgradeneeded 回调是唯一可安全创建/修改对象仓库与索引的地方。跳过这步直接操作会报错。
- 用
createObjectStore(name, { keyPath: 'id', autoIncrement: true })声明主键——推荐业务唯一 ID(如id字段),避免依赖 autoIncrement 生成无意义数字键 - 对高频查询字段立刻建索引,例如:
store.createIndex('byEmail', 'email', { unique: true })或store.createIndex('byStatus', 'status') - 一个对象仓库可建多个索引,但每个索引都增加写入开销和存储占用,只建真正需要查的字段
批量写入:单事务 + 分批控制,防阻塞与中断
一次性 add/put 数千条记录极易触发浏览器中断或卡顿主线程。必须拆成小批次,在同一事务中提交。
Java开发手册规约集合,基于阿里巴巴Java开发手册(嵩山版)。 涵盖7大维度:编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。
- 每批建议 100–500 条,具体视单条数据大小调整;超过 1MB 的单条记录需警惕
- 不要在循环里反复调用
db.transaction(),应复用一个 readwrite 事务,多次调用store.add() - 监听
transaction.oncomplete和transaction.onerror,失败时可重试当前批次
高效读取:用索引 + 游标,避免全表扫描
查单条用 store.get(key) 最快;查多条或范围数据,必须走索引配合游标(cursor),否则性能急剧下降。
立即学习“Java免费学习笔记(深入)”;
- 按索引查:先用
index.openCursor(IDBKeyRange.only(value))或IDBKeyRange.bound(min, max) - 遍历时用
cursor.continue()逐条处理,别让游标长时间悬停;大数据集建议加 limit 控制返回量 - 需要排序结果?在
openCursor或openKeyCursor中传入direction: 'next'或'prev'
维护与升级:版本号驱动结构演进
IndexedDB 不自动迁移数据。每次修改对象仓库结构(新增字段、加索引、改主键),都必须提升版本号,并在新的 onupgradeneeded 中完成迁移逻辑。
- 旧版本数据库打开时,仍走旧版结构,不会自动执行新 onupgradeneeded 代码
- 迁移时可读出旧数据、转换格式、写入新结构,再删除旧仓库(用
db.deleteObjectStore()) - 上线前务必测试跨版本升级路径,尤其涉及索引重建或字段重命名场景

















