IndexedDB离线存储实战教程【含源码】

IndexedDB虽天生支持离线读写，但构建真正可靠、无缝的离线体验远不止打开数据库那么简单——它必须与Service Worker和Cache API深度协同，才能确保页面加载、资源可用与数据持久三者闭环；离线写入需通过syncStatus字段+幂等同步机制保障“不丢、不重、不乱”，而浏览器兼容性差异、动态存储上限、大文件处理及智能同步时机选择等细节，往往才是项目上线后踩坑的关键。本文直击实战痛点，附可运行源码，帮你避开90%开发者在离线方案中绕不开的隐形陷阱。

IndexedDB 本身就是在浏览器本地运行的数据库，不依赖网络，所以它天然就是离线可用的——但“能离线”不等于“自动离线可靠”，关键在你怎么用。

IndexedDB 的数据存在哪？关掉网络后还能读写吗

IndexedDB 数据完全保存在用户浏览器的本地存储空间里（路径类似 chrome://settings/siteData 或 about:storage），和网络状态无关。只要页面已加载、脚本可执行，indexedDB.open() 就能打开数据库、增删查改。

常见误判场景：

• 页面本身是远程 HTML（比如 https://example.com/app.html），关网后根本打不开——这不是 IndexedDB 的问题，是 HTML 文件没缓存
• JS 脚本或初始化逻辑从 CDN 加载，关网后执行中断，indexedDB.open() 根本没跑起来
• 代码里写了 fetch() 后才调用 IndexedDB，错误地把网络请求当成前置条件

只用 IndexedDB 不够：离线体验闭环缺哪几块

纯 IndexedDB 解决的是“本地有数据能读写”，但真实离线场景需要三件套协同：

• Service Worker：拦截网络请求，返回缓存的 HTML/CSS/JS，让页面能加载出来
• Cache API：缓存静态资源（如 /app.js、/style.css），供 Service Worker 在离线时响应
• IndexedDB：存动态业务数据（用户表单、草稿、同步队列等）

三者缺一不可。比如只配了 Cache API 却没注册 Service Worker，缓存不会生效；只用了 IndexedDB 却没缓存 JS，页面白屏。

IndexedDB 离线写入后，怎么安全同步到服务器

离线期间所有写操作都只进 IndexedDB，等联网后再触发同步。难点不在“存”，而在“不丢、不重、不乱”：

• 给每条待同步记录加唯一 id 和 syncStatus 字段（值为 "pending" / "synced" / "failed"）
• 同步前先查 syncStatus === "pending" 的记录，按时间戳升序逐条 POST；成功后用 put() 更新状态
• 网络失败时捕获 fetch() 的 reject，不要直接清空队列——保留 "failed" 状态，下次重试
• 避免并发冲突：服务端收到重复 id 请求，应幂等处理（如 INSERT ... ON CONFLICT DO NOTHING）

示例片段（简化）：

const tx = db.transaction(['drafts'], 'readwrite');
const store = tx.objectStore('drafts');
const pending = await store.getAll(IDBKeyRange.bound([0, 'pending'], [Date.now(), 'pending']));
for (const item of pending) {
  try {
    await fetch('/api/drafts', { method: 'POST', body: JSON.stringify(item) });
    item.syncStatus = 'synced';
    await store.put(item);
  } catch (e) {
    item.syncStatus = 'failed';
    await store.put(item);
  }
}

兼容性与存储上限：别等报错才想起查文档

IndexedDB 在 Chrome/Firefox/Safari/Edge 均支持，但细节差异明显：

• Safari 对 indexedDB.databases() 支持很晚（iOS 16.4+），无法枚举已有库，得靠命名约定 + 错误兜底
• 存储上限不是固定值：Chrome 按 origin 总量计算（通常 50% 磁盘空闲空间），Safari 限制更严（iOS 上常卡在 50MB 左右）
• 大文件别硬塞 IndexedDB：超过 10MB 的 blob 应存 Cache API 或文件系统（showSaveFilePicker），DB 里只存 URL 或 hash
• 注意 versionchange 事件阻塞：升级 schema 时若其他标签页开着旧版 DB，新版本打不开，需提示用户刷新

真正容易被忽略的，是“同步时机”——不是一联网就狂发请求，而是监听 navigator.onLine + fetch 成功率 + 用户当前是否在活跃页面，否则后台标签页可能偷偷耗尽 quota 或触发限流。

以上就是《IndexedDB离线存储实战教程【含源码】》的详细内容，更多关于的资料请关注golang学习网公众号！