HTML表格实现基于IndexedDB的离线数据暂存功能-html教程-PHP中文网

应节流+批量写入：监听编辑事件收集变更，300ms后统一提交到单个事务；用稳定主键（如uuid）而非dom索引；离线冲突需版本字段检测；读操作须等事务完成。

html表格实现基于indexeddb的离线数据暂存功能

表格数据怎么存进 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 —— 避免状态错位。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

插入新行时，立刻生成本地 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);
  });
}