IndexedDB存储对象属性查看值与代码读取值不一致问题咨询

排查步骤 #

• 优先排查Chrome控制台延迟求值问题
  Chrome开发者工具的控制台打印引用类型（对象、数组）时，不会保存打印瞬间的快照，只会在你手动点击展开对象时才读取当前内存中的属性值，这是最常见的IndexedDB读取和面板显示不一致的原因。你可以修改打印代码验证：

  // 1. 直接打印目标属性的实时值，yourKey替换为你要查询的记录主键值
  console.log("目标对象状态值：", arrayOfRetrievedClients.find(item => item.id === yourKey).status);
  // 2. 打印序列化后的快照，彻底避免延迟求值影响
  console.log("完整数据快照：", JSON.parse(JSON.stringify(arrayOfRetrievedClients)));
  

• 验证操作的库、版本、对象存储是否匹配
  在数据库打开成功的回调中加入日志，和开发者工具「Application」面板里查看的对象对比是否一致，避免代码传入了错误的库名、版本号或存储名：

  requestToOpenDatabase.onsuccess = function(event) {
    var theDatabaseObject = requestToOpenDatabase.result;
    // 新增校验日志
    console.log("当前打开的库名：", theDatabaseObject.name, "版本：", theDatabaseObject.version, "目标存储名：", thisObjectStoreName);
    // 原有逻辑...
  }
  

• 检查全局变量污染问题
  你代码中arrayOfRetrievedClients没有使用var/let/const声明，会默认挂载为全局变量，很可能被其他业务代码修改取值。修改为局部变量声明：

  // 新增let声明，避免全局污染
  let arrayOfRetrievedClients = requestToGetContentOfAnObjectStore.result;
  

• 排查异步事务冲突
  IndexedDB的读写操作都是异步的，如果你在调用读取函数的同时，有其他未完成的写事务在修改对应记录，或者同站点的其他标签页在更新IndexedDB数据，也会出现数据不一致的情况。你可以先关闭其他同站点标签页，在写入操作的事务完成回调中再触发读取，验证是否复现。
• 单独读取目标记录验证
  不使用getAll()批量读取，改为通过主键单独查询目标记录，排除批量读取逻辑的干扰：

  // 替换getAll逻辑，yourKey为你要查询的记录主键值
  const requestToGetSingle = theObjectStore.get(yourKey);
  requestToGetSingle.onsuccess = () => {
    console.log("单独查询的记录状态：", requestToGetSingle.result.status);
  }
  

• 修复代码语法错误
  你提供的代码中alert的报错字符串存在换行，普通JavaScript字符串不能直接换行，会触发语法错误，建议修改为模板字符串：

  window.alert(`There was a problem reading the database: ${requestToOpenDatabase.error}`);
  

内容的提问来源于stack exchange，提问作者Diego Mastrangelo