data-*属性仅存静态元数据，不自动持久化；真正状态记录需JS监听+localStorage写入+DOM同步，且必须用data-id唯一标识元素并显式读写。
HTML data- 属性本身不记录状态，刷新即丢；它只是静态元数据槽位，真正“记录”必须靠 JavaScript 主动监听 + 读写 + 配合 localStorage 持久化。
data-* 不是状态容器，只是上下文标签
你写 <button data-action="submit" data-form="login">，浏览器不会自动捕获点击、不会存日志、也不会跨刷新保留 data-action 的值。它只干一件事：让 JS 能快速拿到语义化上下文。
- 所有
data-值都是字符串，data-count="42"读出来是"42"，不是数字 -
dataset.xxx = 'val'只改内存副本，DOM 中的原始属性不变；要写入 HTML 必须用element.setAttribute('data-xxx', 'val') - 命名强制小写+连字符，
data-userId会被转成data-userid，读取时必须用getAttribute('data-userid') - 别存敏感信息或大结构体，比如
data-user-data='{"token":"..."...}'—— 源码可见、拖慢解析、易被 XSS 利用
哪些状态值得用 data-* 标记并持久化
真正该存的是用户主动产生的、有业务意义的 UI 状态，且必须配合唯一标识（如 data-id）才能还原。
-
input.value、textarea.value、select.selectedIndex—— 表单输入类，直接映射用户意图 -
details.hasAttribute('open')或checkbox.checked—— 开关类状态，用data-id关联存储键名 - 自定义组件的
data-active-tab="settings"、data-expanded="true"—— 避免把状态藏在 shadowRoot 或临时变量里 - 看板类布局中各列的卡片 ID 数组，如
{"todo": ["task-1"], "done": ["task-2"]}—— 只存归属关系，不存 DOM 结构
以下通常不用存：scrollTop（除非长列表）、focus（不可靠）、style.left 或 class 名（应由状态驱动，而非反向推导）。
立即学习“前端免费学习笔记（深入）”；
如何正确同步 data-* 与 localStorage
常见错误是只改 dataset 或只写 localStorage，两者脱节导致刷新后状态丢失。
- 页面加载时，先用
querySelectorAll('[data-id]')找到所有带标识的元素，再从localStorage.getItem('ui-state')读出 JSON，遍历匹配data-id并恢复状态 - 用户操作后，立刻更新 DOM（如
el.setAttribute('open', '')）和localStorage（如setItem('ui-state', JSON.stringify(state))） - 对
details元素，不能只设el.open = true，必须用setAttribute('open', '')触发渲染；对checkbox，要设el.checked = true，而不是仅改data-checked - 初始化逻辑必须放在
DOMContentLoaded之后，否则querySelectorAll可能返回空 NodeList
为什么主题切换要提前在 <head> 里读 localStorage
如果等 DOM 加载完再读 localStorage.getItem('theme') 并设 document.documentElement.dataset.theme，用户会看到短暂的默认样式（通常是亮色），再闪变为暗色——这就是 FOUC（Flash of Unstyled Content）。
正确做法是把初始化脚本塞进 <head> 最顶部：
<script>
const setTheme = (theme) => {
theme ??= localStorage.getItem('theme') || 'light';
document.documentElement.dataset.theme = theme;
localStorage.setItem('theme', theme);
};
setTheme();
</script>这段代码在 HTML 解析阶段就执行，确保浏览器计算 CSS 时已知 data-theme 值，主题变量能立即生效。这也是 data-* 配合 localStorage 实现“无感持久化”的关键时机点——不是所有场景都能这么早执行，但主题这类全局状态必须这么处理。
