indexeddb是html5中唯一支持事务原子性的批量插入方案。它通过idbtransaction将多个操作封装为一个事务，任一失败则全部回滚；需复用同一事务实例批量add/put，避免逐条提交，并建议分块处理大数据量。
在HTML5中，真正能实现批量插入并保障事务原子性的只有 IndexedDB。Web SQL 已被废弃且不被现代浏览器支持（如 Firefox、Edge 默认禁用），而 localStorage/sessionStorage 无事务机制，无法回滚，也不支持批量结构化操作。
使用 IndexedDB 的事务机制批量写入
IndexedDB 原生支持事务（IDBTransaction），可将多个增删改操作包裹在同一事务中。任一操作失败，整个事务自动中止，已执行的操作不会生效，从而保证原子性。
- 通过
db.transaction(storeNames, 'readwrite')显式开启读写事务 - 获取对象存储区（Object Store）的
add()或put()请求，全部挂载到同一事务上 - 监听事务的
oncomplete和onabort事件，统一处理成功或回滚逻辑 - 避免在循环中反复调用
add()并单独监听每个请求——应复用同一个事务实例
推荐的批量插入模式（避免逐条提交）
直接循环调用 add() 不等于“批量”，只是串行请求。高效做法是：先打开事务，再在循环中持续添加数据，最后由事务统一提交。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要为每条数据新建事务（性能极差，且无法原子控制）
- 对大批量数据（如 >1000 条），建议分块（chunk）提交，例如每 200 条一个事务，防止长时间阻塞或内存溢出
- 可配合
Promise.all()封装多个事务（但注意：不同事务之间不具原子性；如需全量原子，必须在一个事务内完成）
关键代码片段（事务级批量插入）
以下为简洁可靠的实践写法：
function bulkAddData(db, storeName, dataList) {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
dataList.forEach(item => store.add(item));
tx.oncomplete = () => resolve();
tx.onabort = () => reject(new Error('Transaction aborted'));
tx.onerror = () => reject(tx.error);
});
}
// 调用示例
bulkAddData(db, 'users', [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]).then(() => console.log('全部插入成功'))
.catch(err => console.error('事务失败，已全部回滚：', err));
注意事项与常见陷阱
IndexedDB 的事务有生命周期限制：一旦事件循环空闲，未完成的事务可能被强制终止。因此务必及时监听和响应事件。
- 不要在事务回调外保留对
objectStore的引用（事务结束后该引用失效） - 主键冲突会触发
add()失败，导致事务中止；如需覆盖，改用put() - 事务不支持跨数据库、不支持嵌套；多个 store 操作必须属于同一数据库的同一事务
- 无法像 SQL 那样写 “INSERT INTO … VALUES (),(),()” —— IndexedDB 的批量本质仍是多次 add/put，靠事务兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
