data-*属性仅用于存储静态元数据，不可替代状态管理；真正需跨刷新持久化的数据应使用localStorage、IndexedDB或后端API。
data-* 属性不是状态存储方案，它只存静态元数据；真正要持久化、可跨刷新保留的数据，得靠 localStorage、IndexedDB 或后端 API。
data-* 属性只能存轻量字符串，且不自动持久化
你写 data-user-id="123"，浏览器只把它当 DOM 节点上的初始字符串；页面刷新后，这个值还在 HTML 里，但 JS 修改它（比如 element.dataset.userId = "456"）并不会写回 HTML，DevTools 里也看不到变化。所谓“存”，只是内存里一个临时映射。
- 所有值都是字符串：
data-count="42"读出来是"42"，不是数字；data-active="true"是字符串"true"，不是布尔值 - 属性名必须全小写+连字符：
data-userId或data_user_id都无效，浏览器直接忽略 - dataset 是只读代理，改值必须用
element.setAttribute('data-user-id', '456')，否则 DOM 不同步 - 适合场景：组件类型标识（
data-component="modal"）、调试开关（data-dev-mode="on"）、CSS 选择器钩子（[data-loaded="true"]）
需要跨刷新保存？用 localStorage 存字符串片段
localStorage 是最简单可靠的前端持久化方式，但它只接受字符串——哪怕你想存对象或数字，也得自己转。
- 存表单内容：
localStorage.setItem('draft-content', document.getElementById('editor').innerHTML) - 存结构化数据：先
JSON.stringify()，再setItem()；读取时加try/catch，因为用户可能手动清空或禁用存储 - 判断是否存在别用
if (localStorage.getItem('x'))——"0"、"false"都是真值，正确写法是localStorage.getItem('x') !== null - 写入后建议验证：
localStorage.setItem('test', 'ok'); if (localStorage.getItem('test') !== 'ok') console.warn('storage may be disabled')
复杂状态或大量数据？IndexedDB 更合适
当你要存带时间戳的多个 HTML 片段、富文本历史版本、或需要事务支持的编辑草稿时，localStorage 容量和查询能力都不够。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
IndexedDB支持对象仓库、索引、事务，适合结构化数据；例如按timestamp建索引，快速查最近 5 条草稿 - API 是异步的，不会阻塞渲染；但初始化开库、建 store、处理 upgrade 事件这些步骤绕不开
- 不能直接存 DOM 节点，得序列化成字符串（
outerHTML）或结构化对象（{html: "...", meta: {...}}）再存 - 注意兼容性：老版本 Safari 对
indexedDB的支持有坑，必要时加 polyfill 或降级到localStorage
真正要“写进 HTML 文件”？得走后端或文件导出
data-* 和 Web Storage 都只在浏览器内存或本地磁盘生效，如果你需要把 HTML 内容变成可分发、可部署的文件（比如静态页生成、用户导出备份），就得脱离 DOM 操作。
- 用
File API让用户主动下载：new Blob([htmlString], {type: 'text/html'})→URL.createObjectURL()→<a download="page.html"></a> - 通过
fetch提交到后端：body: JSON.stringify({content: element.innerHTML})，由服务端写入数据库或文件系统 - 导出前务必过滤 XSS：用
DOMPurify.sanitize()处理 HTML 字符串，避免恶意脚本被存下来 - 不要依赖
document.documentElement.outerHTML直接保存——它包含<script></script>标签和内联事件，恢复时不会自动执行，还可能引入安全风险
最容易被忽略的是：data-* 的命名规则和类型陷阱是硬性限制，不是风格偏好；而 localStorage 的静默失败（比如隐私模式下）往往只在用户反馈“怎么又丢了”时才暴露出来。
