HTML中IndexedDB创建数据库与对象仓库的基本操作教程-html教程-PHP中文网

indexeddb.open()必须配onupgradeneeded才能建结构，否则objectstorenames.length为0，后续事务报notfounderror；每次改结构须递增版本号，并在onupgradeneeded中用contains检查后创建store，keypath与autoincrement需按数据主键来源正确选择。

html中indexeddb创建数据库与对象仓库的基本操作教程

indexedDB.open() 必须配 onupgradeneeded 才能建结构

不写 onupgradeneeded，createObjectStore() 就根本不会执行——你拿到的 db 实例里 objectStoreNames.length === 0，后续任何 transaction('users', 'readwrite') 都会报 NotFoundError 或 InvalidStateError: The database has not been upgraded yet.。

这个回调不是“可选升级钩子”，而是唯一能改 schema 的入口。首次打开新库、或传入更高版本号时，浏览器强制触发它；旧版本号不会触发，也不会报错，只会静默沿用旧结构。

每次新增 store / index / 修改 keyPath，必须递增版本号（比如从 1 → 2）
在 onupgradeneeded 里先用 db.objectStoreNames.contains('users') 检查，避免重复创建报 ConstraintError
别在 onsuccess 里调 createObjectStore()——事务已关闭，直接抛 InvalidStateError

createObjectStore() 的 keyPath 和 autoIncrement 怎么选

这两个参数决定主键来源和生成方式，互斥且不可混用。选错会导致 add() 报 DataError 或数据语义错乱。

Cartoonize AI

一款AI图像与设计工具，主要用于在线将照片快速转换为卡通、动漫、素描等多种艺术风格的 AI 工具，适合需要提升相关任务效率的用户。

下载

后端返回带明确 ID（如 { id: "usr_abc123", name: "Alice" }）→ 用 { keyPath: 'id' }，不设 autoIncrement
纯前端生成、无业务 ID（如本地日志、草稿）→ 用 { keyPath: 'id', autoIncrement: true }，插入时不用传 id 字段
完全无主键字段（如存 Blob 或纯配置 JSON）→ 不设 keyPath，用 store.add(data, key) 显式传 key（比如时间戳或 UUID 字符串）
设了 keyPath: 'id' 却传 { name: 'Bob' }（缺 id）→ add() 立即报 DataError
设了 autoIncrement: true 还手动传 id → 浏览器忽略你传的值，仍自增

事务必须新建、不能复用，且要监听 oncomplete

IndexedDB 的事务是短命的：一旦当前事件循环结束、且没有待决请求，事务自动 abort。常见表现是批量 add() 只成功第一个，其余全丢。

每次读写操作前，必须调用 db.transaction(['storeName'], 'readwrite') 新建事务，不能缓存复用
写入后务必监听 request.onsuccess 或 transaction.oncomplete，仅靠 add() 返回 request 不代表落盘
不要在 fetch().then() 或 setTimeout 里操作 objectStore——事务早已失效，再调就抛 TransactionInactiveError
批量写入建议用 Promise.all(requests.map(r => new Promise(...))) 收集所有 onsuccess，而非同步 for 循环

索引不是可选优化项，查非主键字段必须先建 index

objectStore.get(key) 能按主键快速取，但想按 email 或 status 查？没索引就只能遍历全表——大数据量下卡死 UI，count() 和 getAll() 也会变慢。

在 onupgradeneeded 里，对要查询的字段调用 store.createIndex('email_idx', 'email', { unique: false })
查索引字段要用 store.index('email_idx').get('a@b.com')，不能直接 store.get('a@b.com')
unique: true 适合邮箱、手机号等唯一约束字段；重复值会触发 ConstraintError
索引名（如 'email_idx'）只是标识符，不影响查询逻辑，但命名清晰利于维护