应节流+批量写入：监听编辑事件收集变更，300ms后统一提交到单个事务；用稳定主键（如UUID）而非DOM索引；离线冲突需版本字段检测；读操作须等事务完成。
表格数据怎么存进 IndexedDB 而不卡住页面
直接在 onchange 或 input 事件里调用 put() 写库，大概率会卡顿——IndexedDB 是异步 API，但频繁触发写操作（比如每输一个字就存一次）会让事务堆积、阻塞 UI 线程等待事务完成。真正可行的做法是节流 + 批量写入。
推荐用 setTimeout 做简易节流：监听表格单元格编辑（如 contenteditable 或 input 元素），收集变更的 rowId 和字段值，延迟 300ms 后统一提交到一个事务中。避免为每个单元格开独立事务。
- 别用
addEventListener('input', db.put(...))—— 这等于每敲一个键都新建事务 - 把变更暂存在内存对象里，例如
pendingUpdates = new Map()，键为rowId + colName - 调用
db.transaction(['table'], 'readwrite')时，确保只开一次事务，批量执行所有put() - 注意：IndexedDB 不支持直接存 DOM 节点，必须提取值（
cell.innerText或input.value）再序列化
如何让表格行和 IndexedDB 记录一一对应
关键不是靠 DOM 顺序，而是给每行绑定唯一、稳定、可复用的主键。用自增 ID 或 UUID 初始化行数据，后续所有读写都基于这个 id 字段，而不是靠 tr.rowIndex 或 querySelectorAll('tr').length 推算。
初始化表格时，从 IndexedDB 读取数据后生成带 data-id 的 tr，并把该 id 存入对应单元格的 dataset 或关联的 JS 对象中。删除行时，不是删 DOM 再同步删库，而是先发 delete() 请求，成功后再移除 DOM —— 避免状态错位。
立即学习“前端免费学习笔记（深入）”；
- 插入新行时，立刻生成本地
id（推荐crypto.randomUUID()，兼容性够用；若需 IE，可用Date.now() + Math.random()） - 表格渲染逻辑要能接受“空行”：即 DB 中无记录，但用户已添加未保存的行，此时仍需有
id并标记为unsaved: true - 不要依赖
tr的位置索引做 key，拖拽排序或过滤后顺序会变，导致写错记录
离线状态下编辑冲突怎么处理
没有网络时写入成功，恢复联网后同步到服务端——这中间如果别人改了同一行，就会产生冲突。IndexedDB 本身不提供冲突检测，得靠应用层加版本字段，比如每条记录带 version（数字递增）或 updatedAt（毫秒时间戳）。
同步前比对本地记录的 version 和服务器返回的最新值：若本地 version 小于服务器，说明已过期，弹窗提示“数据已被修改”，给出保留本地 / 覆盖 / 合并选项（合并需业务定义规则，比如按字段粒度选值）。
- 每次
put()前自动更新version++或updatedAt = Date.now() - 服务端接口需返回当前记录的
version，前端缓存该值用于下次比对 - 不要跳过冲突检查直接覆盖——尤其多人共用同一张表时，静默覆盖等于丢数据
- IndexedDB 查询不能用
WHERE version > ?，得用IDBKeyRange或遍历游标手动过滤
为什么 get() 读不到刚 put() 的数据
不是数据没存进去，而是你没等事务完成。IndexedDB 的 put() 是异步的，返回的是 IDBRequest 对象，不是 Promise。如果你紧接着调用 get()，很可能还在上一个事务提交前就发出了新请求，而新事务读不到未提交的变更。
正确做法是把读操作放在事务的 onsuccess 回调里，或者用 Promise 包装事务：
function promisifyPut(db, storeName, value) {
return new Promise((resolve, reject) => {
const tx = db.transaction([storeName], 'readwrite');
const store = tx.objectStore(storeName);
const req = store.put(value);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
}
- 别在
put().onsuccess外部直接调用get()，它们不在同一个事务上下文 - 多个
put()共享一个事务时，get()必须等整个事务oncomplete后再发起新事务读取 - 开发时打开 DevTools 的 Application → IndexedDB 面板，手动刷新看数据是否真实写入，排除逻辑误判
