怎么利用HTML的IndexedDB的get方法通过主键读取单条数据记录-html教程-PHP中文网

get方法必须在事务中调用，路径为db→transaction→objectstore→get()；查不到数据时result为undefined而非报错，须同时监听onsuccess和onerror事件。

怎么利用html的indexeddb的get方法通过主键读取单条数据记录

get 方法必须在事务中调用，否则会报 `InvalidStateError`

IndexedDB 的 get 不是独立 API，它只能在打开对象存储（ObjectStore）的上下文中使用，而对象存储又必须从一个活跃事务中获取。直接在 db 实例上调用 get 会失败——浏览器会抛出 InvalidStateError: The transaction is inactive or finished 或类似错误。

常见错误写法：

db.get('some-key'); // ❌ 报错：db 没有 get 方法

正确路径是：db → transaction → objectStore → get()。事务生命周期很短，必须在 transaction.oncomplete 或 request.onsuccess 中处理结果，不能“等返回值”。

事务需显式指定模式：readonly（读取足够，性能更好）
对象存储名必须与创建时一致，大小写敏感
主键类型要匹配：数字主键不能传字符串 '1'，除非是 keyPath 且设置了 autoIncrement: false

主键类型不匹配会导致 `get` 返回 `undefined` 而不报错

get 方法查不到数据时，不会抛异常，而是让 request.result 为 undefined。这很容易被误判为“数据库为空”，实际可能是主键类型或格式不对。

例如，如果表用 IDBKeyRange.lowerBound(1) 创建，主键是 number 类型，但你传了 get('1')（字符串），结果就是 undefined。

建议在调用前做类型校验：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

const key = parseInt(id, 10);<br>if (isNaN(key)) {<br>  console.error('主键不是有效数字');<br>  return;<br>}<br>const request = store.get(key);

字符串主键（如 UUID）要确保前后空格已 trim：store.get(id.trim())
复合主键（数组）必须传完全相同的数组引用或深等价值，get([1, 'a']) !== get([1, 'a']) 在某些旧版本 Safari 中可能失败
自增主键（autoIncrement: true）只能用 number 查询，不能用 string

异步链路容易漏掉 `request.onerror`，导致失败静默

get 请求失败（比如主键越界、存储被删、磁盘满）时，不会触发 onsuccess，也不会 throw，而是走 onerror。很多代码只写 onsuccess，结果查不到数据也不报错，调试困难。

务必同时监听两个事件：

const request = store.get(key);<br>request.onsuccess = () => {<br>  const data = request.result;<br>  if (data === undefined) {<br>    console.log('未找到该主键对应记录');<br>  } else {<br>    console.log('查到:', data);<br>  }<br>};<br>request.onerror = () => {<br>  console.error('get 请求失败:', request.error);<br>};

不要依赖 transaction.onerror 替代单个请求的 onerror，粒度太粗，无法定位具体哪个 get 出问题
Chrome DevTools 的 Application → IndexedDB 面板可手动查看主键是否存在，用于交叉验证
若频繁读取，注意事务复用：多个 get 可共用一个 readonly 事务，减少开销

用 async/await 封装时，必须用 Promise 包裹 request

原生 IndexedDB 是纯事件驱动，没有 promise 接口。想用 await 必须自己封装，但要注意不能只 resolve onsuccess，否则 onerror 会丢失。

安全的封装方式：

function idbGet(db, storeName, key) {<br>  return new Promise((resolve, reject) => {<br>    const tx = db.transaction(storeName, 'readonly');<br>    const store = tx.objectStore(storeName);<br>    const req = store.get(key);<br>    req.onsuccess = () => resolve(req.result);<br>    req.onerror = () => reject(req.error);<br>  });<br>}<br>// 使用：<br>try {<br>  const data = await idbGet(db, 'users', 123);<br>  console.log(data);<br>} catch (err) {<br>  console.error(err);<br>}