在 JavaScript 中使用 IndexedDB 的 ObjectStore,核心是先打开数据库、创建或获取对象仓库,再对数据进行增删改查操作;关键在于理解事务的作用范围和对象仓库的生命周期,所有操作均为异步且需在事务中执行。

在 JavaScript 中使用 IndexedDB 的 ObjectStore,核心是先打开数据库、创建或获取对象仓库,再对数据进行增删改查操作。关键在于理解事务(transaction)的作用范围和对象仓库的生命周期。
打开数据库并创建对象仓库
IndexedDB 需要显式打开数据库,并在版本升级时定义对象仓库(ObjectStore)。首次打开或版本号变更时,会触发 onupgradeneeded 事件,在其中用 createObjectStore() 创建仓库:
- 调用
indexedDB.open("myDB", 1)打开数据库,第二个参数是版本号 - 在
onupgradeneeded回调中,通过event.target.result获取IDBDatabase实例 - 用
db.createObjectStore("users", { keyPath: "id" })创建仓库,指定主键路径(如"id"),支持自增可加autoIncrement: true - 可选:用
store.createIndex("email", "email", { unique: true })创建索引,便于按字段查询
往对象仓库中添加数据
写入数据必须在事务中进行,且事务需明确指定作用的对象仓库和读写权限:
- 调用
db.transaction(["users"], "readwrite")创建读写事务 - 用
transaction.objectStore("users")获取目标对象仓库引用 - 调用
store.add({ id: 1, name: "Alice", email: "a@example.com" })插入新记录;若主键已存在会报错 - 也可用
store.put()替代,它支持更新已有主键的数据,不会报错 - 记得监听
request.onsuccess和request.onerror处理结果
从对象仓库中读取数据
读取同样依赖事务,但可用只读模式提升性能:
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记(深入)”;
-
db.transaction(["users"], "readonly")创建只读事务 -
store.get(1)按主键精确查找(返回单个值) -
store.getAll()获取全部记录;store.getAllKeys()只取所有主键 - 通过索引查询:
store.index("email").get("a@example.com") - 范围查询可用
IDBKeyRange,例如IDBKeyRange.bound(1, 5)查主键 1–5 的数据
更新与删除数据
更新和删除也必须走事务流程,逻辑清晰、操作原子:
- 更新用
store.put(),传入含主键的对象即可覆盖原记录 - 删除用
store.delete(1),按主键移除单条;store.clear()清空整个仓库(慎用) - 批量操作建议复用同一个事务,避免频繁开启关闭事务影响性能
- 注意:所有操作都是异步的,不能直接 return 结果,需用 Promise 封装或 await + async/await(配合封装工具如 idb 库更方便)
不复杂但容易忽略:每次版本升级都要在 onupgradeneeded 里重新声明对象仓库和索引,否则旧版本仓库结构不会自动更新。实际开发中推荐用轻量封装库(如 idb)简化 Promise 化调用。

















