data-属性不能替代localStorage存格式化配置，因其仅为单元素级字符串元信息，无持久化、全局管理及多页同步能力；正确做法是用localStorage配合try/catch存取JSON配置，并监听storage事件同步其他标签页。
data- 属性不是标签，也不是存储格式化数据的容器；它是 HTML5 的自定义数据属性机制，用于在元素上附加额外的、与 DOM 行为相关的元信息，**不能替代 localStorage 或 JSON 来存配置或结构化数据**。
为什么不能用 data- 存格式化配置（如缩进、语言偏好）
常见误解是把 data- 当成轻量“数据库”，但它本质是单元素级的临时附着点：
-
data-值始终是字符串，存对象必须手动JSON.stringify()+JSON.parse()，但无法保证解析安全（比如值被截断、含非法字符） - 每个元素只能存一份数据，无法全局统一管理（比如你有 5 个代码编辑器实例，就得重复写 5 次
data-settings） - 没有持久化能力：页面刷新后全部丢失，不满足“保存配置”这一基本需求
- 若用于多标签页同步，
data-完全无感知能力，无法触发更新
dataset 读写时的典型陷阱
即使只做单页临时传参，dataset 的行为也容易踩坑：
- HTML 中写
data-user-id="123"，JS 里必须用element.dataset.userId（连字符自动转驼峰），写成dataset.userid或dataset["user-id"]都取不到 - 值为空字符串时，
dataset.xxx返回空串而非undefined，容易误判“存在” - 修改
dataset.xxx = "new"会同步反映到 DOM 属性，但反过来——直接element.setAttribute("data-xxx", "new")也能更新dataset，二者等价，别以为只有 dataset 才生效 - 不要存大段 JSON 字符串到
data-，既影响 HTML 可读性，又可能因引号嵌套导致解析失败
真正适合存格式化配置的地方是 localStorage
如果你要保存的是用户选的 indentSize、language、wrapLine 这类设置，唯一合理且健壮的位置就是 localStorage：
立即学习“前端免费学习笔记（深入）”；
- 写入：用固定键名，如
localStorage.setItem("codeFormatterSettings", JSON.stringify(configObj)) - 读取：必须加
try/catch，因为用户可能手动篡改或清空存储：let config = {}; try { const raw = localStorage.getItem("codeFormatterSettings"); if (raw) config = JSON.parse(raw); } catch (e) { // 解析失败，用默认值兜底 config = { indentSize: 2, language: "javascript", wrapLine: true }; } - 监听变更：用
window.addEventListener("storage", ...)同步其他标签页，注意它**不会在当前页触发**——这是最容易忽略的一点
真正需要 data- 的地方，是给某个按钮加 data-action="format-json"，或给预览区加 data-lang="typescript" 做运行时上下文标识。它管“局部行为”，不管“用户偏好”。混淆这两者，后期维护成本会指数级上升。
