IndexedDB不能存储HTML节点，只能存可序列化数据；DOM元素、函数、window等宿主对象会触发DataCloneError，安全类型包括字符串、数字、数组、普通对象、Date、ArrayBuffer、Blob等，存HTML字符串需先用DOMPurify清洗防XSS并控制体积。
IndexedDB 不能存 HTML 节点，只能存可序列化数据
直接把 document.body、querySelector 返回的 DOM 元素或整个 HTML 字符串塞进 IndexedDB，会立刻抛出 DataCloneError。IndexedDB 底层用的是结构化克隆算法（structured clone），它明确排除 DOM 节点、函数、window、document 等宿主对象。
常见错误现象：Failed to execute 'put' on 'IDBObjectStore': An object could not be cloned —— 这不是数据库没开好，是传了非法值。
- 可安全存入的：字符串、数字、数组、普通对象（含嵌套）、
Date、RegExp、ArrayBuffer、Blob（部分浏览器支持） - 必须转换后才能存的：
HTMLCollection或NodeList→ 转成数组；Element→ 提取outerHTML或innerHTML字符串（注意 XSS 风险） - 绝对不能存的：
document、event、console、任何绑定过事件监听器的对象
存 HTML 字符串前必须做三件事
如果你真要持久化某段 HTML 结构（比如用户编辑的富文本草稿、可复用的 UI 片段），得先清洗、裁剪、校验，否则极易踩坑：
- 防 XSS：用
DOMPurify.sanitize()过滤后再存，别信innerText或正则硬删——它们绕不过所有 payload - 控体积：单条记录超过 10MB 可能触发 Chrome 的事务拒绝；建议对超长 HTML 做分片（如按
<section>拆成多条），并加size字段标记原始长度 - 去冗余：移除内联
style、script、data-*属性（除非业务强依赖），避免存储不可复现的渲染状态
示例写入逻辑：
const cleanHtml = DOMPurify.sanitize(dirtyElement.innerHTML);<br>store.put({<br> id: 'draft-123',<br> html: cleanHtml,<br> timestamp: Date.now(),<br> size: cleanHtml.length<br>});
立即学习“前端免费学习笔记（深入）”；
离线时还原 HTML 不等于直接 innerHTML 插入
从 IndexedDB 读出 HTML 字符串后，element.innerHTML = record.html 是最简做法，但有隐藏风险：
- 丢失事件绑定：原页面的
onclick、addEventListener不会自动恢复，需在插入后手动 re-init - 资源路径失效：如果 HTML 含
<img src="/assets/logo.png">，而 Service Worker 没缓存该路径，离线时图片 404 - 样式隔离问题：若用 Shadow DOM 或 CSS-in-JS，直接插入可能破坏作用域，建议统一走
template.innerHTML+content.cloneNode(true)
更稳妥的做法是只存语义化数据（如 Markdown 或 JSON Schema），渲染层完全由前端框架控制，而非来回搬运 HTML 字符串。
为什么你总觉得“节点没存住”？先查这四点
IndexedDB 读写成功但离线时拿不到数据，90% 不是 API 用错，而是环境链断了：
-
indexedDB.open()被调用时页面还没 HTTPS（或非 localhost）—— Safari 和新版 Chrome 直接静默失败 - Service Worker 没注册，或没缓存
/index.html和 JS 入口文件 → 页面根本加载不出来，indexedDB.open()根本没机会执行 - 数据库名含空格或斜杠（如
"my app/v1"）→ 应改为"my-app-v1"，版本号必须是正整数 - 事务已关闭还试图写入：常见于把
store.put()放在transaction.oncomplete之后，或跨事件循环保留 transaction 引用
真正难的从来不是“怎么存”，而是让存进去的数据，在断网、刷新、多标签页、隐私模式下都稳定可读——这需要 IndexedDB + Service Worker + 渲染逻辑三者严丝合缝，缺一不可。
