HTML中IndexedDB的基本操作与大数据量本地存储方案-html教程-PHP中文网

indexeddb 必须严格管理版本控制、事务边界和索引设计才能支撑大数据量。需在 onupgradeneeded 中按 oldversion 分段建库建索引；查大量数据须用 cursor + index 分块遍历，禁用 getall()；写操作须监听 abort/error 并及时 abort() 避免事务锁。

html中indexeddb的基本操作与大数据量本地存储方案

IndexedDB 不是“能用就行”的存储方案，而是必须明确版本控制、事务边界和索引设计才能撑住大数据量的本地数据库。盲目调用 add() 或 put() 写入万条记录，大概率触发事务自动中止或内存溢出。

数据库打开与版本升级必须分清 oldVersion 和 newVersion

浏览器只在 onupgradeneeded 中允许结构变更，且该事件仅当传入的版本号 > 当前数据库版本时才触发。常见错误是反复用同一版本号打开，导致新 createObjectStore() 被跳过，后续写入直接报 NotFoundError。

indexedDB.open('mydb', 2) 打开时若当前库版本为 1，则触发 onupgradeneeded，event.oldVersion === 1，event.newVersion === 2
若当前已是版本 2，再用 indexedDB.open('mydb', 2)，则跳过 onupgradeneeded，直接走 onsuccess
升级逻辑必须按 oldVersion 分段写：比如 if (oldVersion 、<code>if (oldVersion ，不能只写 <code>if (oldVersion === 1)

写入万级数据必须拆事务 + 控制游标批量

单个事务内写入超过几千条记录，Chrome 会因内存压力静默失败（不抛错，但 transaction.oncomplete 不触发）；Safari 更激进，常在 500 条左右就中断。不能依赖“一次全写”。

Wechat HTML Publisher

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

下载

用 transaction.oncomplete 而非 request.onsuccess 判断整批是否成功
每批控制在 100–300 条，用递归或 setTimeout 分片提交，避免阻塞事件循环
对大数组写入，优先用 objectStore.put(item, key) 而非 add()，避免主键冲突中断整批

function batchWrite(store, items, offset = 0, batchSize = 200) {
  const tx = db.transaction([store.name], 'readwrite');
  const os = tx.objectStore(store.name);
  const chunk = items.slice(offset, offset + batchSize);
  chunk.forEach(item => os.put(item));
  tx.oncomplete = () => {
    if (offset + batchSize  console.error('batch write failed:', e.target.error);
}