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: 'z@x.com' } 这类纯对象，不是
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 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
