IndexedDB添加数据步骤详解

本文详细讲解了如何使用 IndexedDB 的 `objectStore.add()` 方法安全、可靠地向本地数据库插入新记录，涵盖从打开数据库、创建对象存储、开启读写事务，到准备符合键路径或自增规则的数据、调用添加方法并正确处理成功与冲突错误（如 ConstraintError）的完整流程，同时强调关键陷阱——如不可在 onupgradeneeded 中写入、必须使用 "readwrite" 事务、严格匹配 store 名称和键约束等，辅以清晰示例帮助开发者避开常见坑点，快速实现健壮的离线数据持久化。

使用 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);
};

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。