data-*属性仅存静态元数据，无法持久化状态；真正跨刷新记忆需结合localStorage/sessionStorage手动读写。
data-* 属性不能保存组件状态，它只存静态元数据；真正要跨刷新“记住”用户操作，必须搭配 localStorage 或 sessionStorage 手动实现读写逻辑。
为什么直接改 dataset 不等于状态持久化
你写 el.dataset.isOpen = "true"，只是在 JS 内存里映射了一个临时值，DOM 上的 data-is-open 属性并不会自动更新；页面一刷新，这个值就没了。更关键的是：dataset 是只读代理，不是响应式存储——它不触发 DOM 变更、不通知 CSS 选择器重匹配、也不写入 HTML 源码。
-
el.setAttribute("data-is-open", "true")才是真正写入 DOM 的方式 - 但即使这样，刷新后依然丢失——
data-*本身不持久，它只是渲染时的初始快照 - 想“记住”，必须把值同步到
localStorage，并在初始化时主动读取还原
哪些状态值得用 data-* + localStorage 联合保存
不是所有交互都需要记。只存用户明确触发、有业务意义、且容易映射为字符串的标识：
-
<input>的value（用getAttribute("value")读，不是valueproperty） -
<select>当前选中项的selectedIndex或value -
<details>是否展开：用el.hasAttribute("open")判断，存"true"/"false" - 自定义组件的激活 tab：
data-active-tab="settings" - 折叠面板的展开项 ID 列表：
data-expanded-ids='["panel-1","panel-3"]'（需JSON.stringify后存）
读写时最容易踩的三个坑
很多人卡在这几步上，不是逻辑错，而是 API 用法不对：
立即学习“前端免费学习笔记（深入）”；
- 读取含数字或大写的属性名（如
data-1st-load）时，别用dataset.1stLoad——语法错误；要用getAttribute("data-1st-load")或dataset["1stLoad"] - 存布尔/数字时，
data-active="false"读出来是字符串"false"，Boolean("false")是true；判断得写el.getAttribute("data-active") === "true" - 存 JSON 字符串（如
data-config='{"theme":"dark"}'），必须用JSON.parse(el.getAttribute("data-config"))，而不是JSON.parse(el.dataset.config)——驼峰转换可能把键名搞错
一个最小可用的折叠组件状态同步示例
假设你有一个 <details data-id="sidebar">，想记住它是否展开：
function saveDetailsState(el) {
const id = el.getAttribute("data-id");
const isOpen = el.hasAttribute("open");
localStorage.setItem(`details:${id}`, isOpen.toString());
}
<p>function restoreDetailsState(el) {
const id = el.getAttribute("data-id");
const saved = localStorage.getItem(<code>details:${id}</code>);
if (saved === "true") el.setAttribute("open", "");
}</p><p>// 初始化时调用
restoreDetailsState(document.querySelector('details[data-id="sidebar"]'));</p><p>// 监听 toggle 事件
document.addEventListener("toggle", (e) => {
if (e.target.matches('details[data-id]')) {
saveDetailsState(e.target);
}
});注意：这里用 setAttribute("open", "") 而不是 el.open = true，因为只有属性变更才能被 hasAttribute("open") 正确捕获；而 el.open 是 property，不反映在 DOM 属性层面。
