localforage 初始化必须显式指定 driver 降级策略，否则在旧版 safari 或 ie 中可能报错或静默失败；需设 driver: [localforage.indexeddb, localforage.localstorage]，并配合 name、version 避免冲突，初始化后 await localforage.ready() 再操作。
localForage 初始化必须显式指定 driver 降级策略
不配置 driver 时，localForage 在旧版 Safari 或 IE 中可能直接报错或静默失败，而不是退回到 localStorage。它默认只尝试 IndexedDB，但很多浏览器（尤其是 iOS Safari）对 IndexedDB 的支持有严格限制（如无痕模式下禁用、首次访问需用户交互后才启用）。
正确做法是主动声明降级顺序：
-
driver: [localforage.INDEXEDDB, localforage.LOCALSTORAGE]—— 显式列出首选和备选驱动 - 搭配
name和version避免跨项目数据冲突（例如多个使用 localforage 的插件共存） - 初始化后建议加个
await localforage.ready()确保底层存储就绪，再执行读写，否则可能拿到undefined
DOM 状态序列化不能直接存 element 或 dataset
localForage 虽支持任意 JS 类型，但底层仍依赖 IndexedDB 的 structured clone 算法——它会拒绝函数、DOM 节点、window 对象等不可序列化值。试图存 document.getElementById('my-div') 或 el.dataset（若含 DOM 引用）会直接抛出 DataCloneError。
必须手动提取可序列化字段：
- 只保留原始属性：如
id、textContent、style.left、style.top、dataset.type（确保是字符串/数字） - 避免存
el.classList，改用Array.from(el.classList).join(' ')转为字符串 - 自定义属性如
data-x、data-y可直接取值，但注意dataset.x返回的是字符串，数值需显式parseInt()
页面加载时重建 DOM 必须等 DOM ready 且 localForage ready
常见错误是把 localforage.getItem('dom-state') 放在 DOMContentLoaded 回调里就立即操作 DOM，但此时 localForage 可能还没完成初始化（尤其首次加载时 IndexedDB 建库需异步），导致读到 null 或旧缓存。
安全写法是双等待：
- 先等
document.readyState === 'complete'或监听DOMContentLoaded - 再
await localforage.ready()，然后const state = await localforage.getItem('dom-state') - state 存在才遍历重建：用
document.createElement('div')+Object.assign(el.style, { left: state.x + 'px' })等方式还原，而非 innerHTML 插入（防 XSS）
localStorage 作为 fallback 时容量和性能差异明显
当 localForage 降级到 localStorage 时，所有数据仍走 JSON.stringify() → 字符串存储路径，但容量上限从 IndexedDB 的数百 MB 缩至约 5MB，且是同步阻塞操作。大量 DOM 状态（比如上百个拖拽元素）可能导致卡顿或超出限额。
应对策略：
- 状态结构做最小化：去掉冗余字段，用缩写键名（如
x代替leftPosition） - 定期清理过期项：localForage 不自带 TTL，需自己加时间戳字段并手动过滤
- 避免存 base64 图片或大段 HTML；图片 URL 用外链，内容用占位符 + 加载时懒取
真正麻烦的不是写入，而是读取后批量重建 DOM 的渲染压力——这和存储无关，但容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
