HTML文档在离线存储WebSQL失效之后DOM持久化替代方案

IndexedDB是当前唯一兼顾容量、结构与离线能力的客户端方案，它不支持SQL但提供事务、索引、游标和二进制存储，适用于中等规模结构化数据，初始化须监听onupgradeneeded创建objectStore，否则后续操作将报错。

WebSQL 在离线模式下根本不可靠

WebSQL 已被 W3C 正式废弃，Chrome 133+ 在非安全上下文（HTTP）中彻底禁用 window.openDatabase，Safari 17 起仅在 HTTPS 页面允许调用，Firefox 从未支持。更关键的是：即使调用成功，它在无痕模式下会直接返回 undefined 或抛出 SecurityError，离线场景下无法保证可用性。你不能把它当作“能用就行”的兜底方案。

DOM 数据该存什么、怎么存才真正离线可用

直接存 element.outerHTML 是常见误区——它丢失事件监听器、绑定的 JS 对象引用、Canvas 绘图状态等，还原后只是静态快照。真正可持久化的是 DOM 对应的**数据模型**，不是渲染结果本身。

• 表单内容 → 存 { name: '张三', email: '[email protected]' } 这类纯对象，不是 form.innerHTML
• 富文本编辑器 → 存 Markdown 字符串或 Slate/ProseMirror 的 JSON AST，而非渲染后的 div 树
• 动态列表项 → 存数组如 [{ id: 'i1', title: '任务A', done: false }]，渲染时再生成 DOM
• 所有数据必须可序列化（不能含函数、DOM 节点、Date 实例等），否则 JSON.stringify() 会静默丢弃字段

IndexedDB 是当前唯一兼顾容量、结构与离线能力的客户端方案

它不是 WebSQL 的“平替”，而是设计哲学完全不同：不支持 SQL，但提供事务、索引、游标和二进制存储能力，适合 DOM 渲染所需的中等规模结构化数据。

• 初始化必须监听 onupgradeneeded 创建 objectStore，否则后续 transaction.objectStore('xxx') 报 NotFoundError
• 写入操作必须包裹在 transaction.oncomplete 之前，否则触发 TransactionInactiveError
• 读取结果要判空：const item = event.target.result; if (!item) return;，避免解构 undefined
• 小数据（localStorage.setItem('dom-data', JSON.stringify(model))，简单且兼容性好；但超过 2MB 就可能阻塞主线程，影响首屏渲染

无痕模式下必须降级到内存缓存

几乎所有浏览器在无痕模式中会拒绝 localStorage 写入（抛 QuotaExceededError），也限制 IndexedDB 打开（Safari 直接失败，Firefox 用临时实例）。此时唯一可靠路径是内存缓存：

立即学习“前端免费学习笔记（深入）”；

• 用 Map 或普通对象暂存当前会话的 DOM 模型，配合路由 history.state 传递轻量状态
• 表单输入实时更新内存对象，不依赖任何持久 API
• 页面卸载前（beforeunload）尝试写入 localStorage 或 indexedDB，失败则静默忽略
• URL 参数（?data=...）只适合极简状态（如分页页码、筛选标签），不适合嵌套对象或长文本

真正的离线韧性不来自“换一个存储 API”，而来自把 DOM 渲染逻辑和数据生命周期解耦——让渲染只依赖可重建的数据模型，而不是试图保存 DOM 本身。