IndexedDB JavaScript：如何在已有值中追加新数据？

要实现你说的追加操作，IndexedDB没有直接的"原地追加"API，最简流程就是读取已有记录 → 修改字段值 → 写回仓库，具体实现如下：

核心代码示例 #

假设你的数据库名为myDB，对象仓库名为myStore，目标记录的主键为id1（你需要根据实际情况替换这些名称）：

// 打开目标数据库
const dbRequest = indexedDB.open('myDB', 1);

dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  // 开启读写事务，操作目标仓库
  const tx = db.transaction('myStore', 'readwrite');
  const store = tx.objectStore('myStore');

  // 读取要修改的记录
  const getReq = store.get('id1');
  getReq.onsuccess = () => {
    const targetRecord = getReq.result;
    if (targetRecord) {
      // 追加内容到numbers字段
      targetRecord.numbers = `${targetRecord.numbers},two`;
      // 用put方法更新记录（主键存在则更新，不存在则插入）
      const putReq = store.put(targetRecord);
      putReq.onsuccess = () => console.log('数据追加完成');
      putReq.onerror = (err) => console.error('写入失败:', err);
    } else {
      console.log('未找到对应记录，可考虑初始化数据');
    }
  };

  getReq.onerror = (err) => console.error('读取记录失败:', err);

  // 事务完成后关闭数据库连接
  tx.oncomplete = () => db.close();
};

dbRequest.onerror = (err) => console.error('数据库打开失败:', err);

关键注意点 #

• 必须使用readwrite模式的事务，否则无法修改数据。
• put方法是这里的最优选择：它既能更新已有主键的记录，也能在记录不存在时插入新记录，适配不同场景。
• 所有操作都是异步的，要通过onsuccess/onerror回调处理结果。

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