如何用 objectStore.add 向本地数据库插入一条新记录-js教程-PHP中文网

使用 objectstore.add() 插入新记录需确保数据库已打开、事务为 readwrite 模式、正确获取 objectstore，并传入符合键路径（keypath）、自增（autoincrement）或显式键要求的数据；成功返回主键，冲突触发 constrainterror。

如何用 objectstore.add 向本地数据库插入一条新记录

使用 objectStore.add() 向 IndexedDB 的 object store 插入新记录，核心是确保数据库已打开、事务已启动、object store 已正确获取，并传入符合键路径要求的数据对象。

确认数据库已成功打开并获取 objectStore

必须在 onsuccess 回调（或 await db）之后操作，且通过 transaction.objectStore('storeName') 获取目标 store：

不能在 onupgradeneeded 中直接调用 add()，因为此时事务为 versionchange 类型，不支持写操作
要使用 "readwrite" 模式开启事务：db.transaction('users', 'readwrite')
确保 store 名称拼写与 createObjectStore() 时一致

准备符合键约束的数据对象

add() 要求数据必须能生成唯一主键。根据 object store 的定义方式选择：

若创建时指定了 keyPath（如 { keyPath: 'id' }），则数据对象中必须包含该属性，且值不可重复：{ id: 101, name: '张三' }
若创建时设了 autoIncrement: true（无 keyPath），则传入对象不能含主键字段，add() 会自动生成数字键：{ name: '李四', email: 'lisi@example.com' }
若既无 keyPath 也无 autoIncrement，则必须显式传入键作为第二个参数：store.add(data, 'custom-key-001')

调用 add() 并处理结果

add() 返回一个 IDBRequest 对象，通过监听其 onsuccess 或用 await（配合 promise 化封装）判断是否成功：

插入成功时，event.target.result 返回新记录的主键值（可用于后续操作）
若主键冲突（如重复的 keyPath 值），触发 onerror，错误名通常为 "ConstraintError"
建议始终监听错误，避免静默失败：request.onerror = e => console.error('插入失败:', e.target.error)

完整简明示例

假设已建好名为 books 的 store，主键为 isbn：

const tx = db.transaction('books', 'readwrite');
const store = tx.objectStore('books');
const book = { isbn: '978-7-XXXX-XXXX-X', title: 'JavaScript 高级程序设计', year: 2023 };

const request = store.add(book);
request.onsuccess = () => {
  console.log('插入成功，主键为:', request.result); // 输出 isbn 值
};
request.onerror = () => {
  console.error('插入失败:', request.error);
};