Chrome扩展开发：如何正确更新IndexedDB中的数组数据？

你当前的代码无法更新IndexedDB，核心问题是：你只修改了从数据库读取到的内存对象副本，没有将修改后的对象重新写入数据库，所以数据库里的原始数据不会有任何变化。

具体问题点 #

从index.get()获取的event.target.result是数据库中记录的内存副本，对这个副本的数组进行push操作只会改变内存中的数据，不会自动同步回IndexedDB，必须主动调用更新方法才能持久化修改。

另外还有两个小细节需要注意：

• Object.keys(userObj)返回的是键名数组，直接用==和theUserId比较会有类型匹配问题，应该取数组第一个元素再比较，比如Object.keys(userObj)[0] === theUserId
• push()方法返回的是数组的新长度，你把它赋值给updatedObj完全没必要，直接执行currentObj.push(objToAdd1)即可

修正后的代码示例 #

records.forEach((person) => {
  console.log("here1");
  const index = objectStore.index("urlKeyValue");
  let search = index.get(person.urlKeyValue);

  search.onsuccess = function (event) {
    if (search.result === undefined) {
      // 无匹配记录，添加新对象
      let request = objectStore.add(person);
      request.onsuccess = function () {
        console.log("Added: ", person);
      };
      request.onerror = function (err) {
        console.error("添加失败: ", err);
      };
    } else {
      const existingRecord = event.target.result;
      // 遍历allMessages数组查找匹配用户
      for (const userObj of existingRecord.allMessages) {
        // 严谨判断当前userObj是否包含目标用户ID
        const userKey = Object.keys(userObj)[0];
        if (userKey === theUserId) {
          const objToAdd1 = {
            time: person.allMessages[0][theUserId][0].time,
            msg: person.allMessages[0][theUserId][0].msg,
          };
          // 向数组追加新对象
          userObj[theUserId].push(objToAdd1);
          // 关键：将修改后的对象存回数据库
          const updateRequest = objectStore.put(existingRecord);
          updateRequest.onsuccess = function () {
            console.log("记录更新成功");
          };
          updateRequest.onerror = function (err) {
            console.error("更新失败: ", err);
          };
          // 找到匹配项后可以跳出循环，避免重复处理
          break;
        }
      }
    }
  };

  search.onerror = function (err) {
    console.error("查询失败: ", err);
  };
});

核心修正说明 #

1. 将查询到的记录存入existingRecord变量，方便后续操作
2. 修改内存中的数组后，必须调用objectStore.put(existingRecord)，这个方法会根据主键覆盖数据库中已存在的记录，实现持久化更新
3. 增加了错误处理逻辑，方便排查问题
4. 找到匹配的userObj后添加break，避免不必要的循环

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