data-*属性不能保存页面状态，刷新即丢失；需配合localstorage/sessionstorage实现持久化，且读取应优先用getattribute而非dataset以确保兼容性。
HTML data-* 属性本身**不能保存页面状态**，刷新即丢；它只是 DOM 节点上的静态字符串快照，不是状态容器。真要“记住上次行为”，得靠 localStorage 或 sessionStorage 配合 data-* 做初始化映射——data-* 只负责把初始值“透传”进 JS，不负责存、不负责同步、不负责响应变化。
为什么直接改 dataset.xxx = 'val' 页面刷新后就没了
因为你改的只是内存里的 DOMStringMap 代理副本，原始 HTML 的 data-xxx 属性值根本没变。DevTools 里看不到更新，服务端返回的 HTML 里也还是旧值。浏览器不会自动把 dataset 的修改写回 DOM 树。
- ✅ 正确写入 DOM：必须用
element.setAttribute('data-xxx', 'val') - ❌ 错误幻想：以为
el.dataset.xxx = 'val'就等于“存好了” - ⚠️ 更隐蔽的问题：先设
dataset.foo = 'a'，再用setAttribute('data-foo', 'b')，后续dataset.foo仍返回'a'—— dataset 缓存没刷新
怎么让折叠面板“记住”展开状态（真实可运行逻辑）
核心思路：用户操作 → 更新 DOM 的 data-is-open → 同时写入 localStorage → 下次加载时从 localStorage 读，再用 setAttribute 同步到 DOM。
- 读取初始状态优先用
localStorage.getItem('panel-open')，不是dataset.isOpen（可能为空或过期） - 切换时：先
el.setAttribute('data-is-open', isOpen ? 'true' : 'false')，再localStorage.setItem('panel-open', String(isOpen)) - CSS 控制样式用
[data-is-open="true"]，而不是靠 JS 动态加 class —— 这样服务端渲染也能生效 - 注意类型：
localStorage只存字符串，JSON.parse()或=== 'true'才能判断布尔逻辑
getAttribute 比 dataset 更可靠的真实原因
dataset 是带规则的语法糖，不是通用读取器。它只认全小写+连字符命名（如 data-user-id），遇到 data-api-key、data-1st-load、data_user_id 全部静默失败，返回 undefined 且不报错。
- ✅ 推荐读取：一律用
el.getAttribute('data-user-id')，返回原始字符串，兼容所有合法命名 - ✅ 存 JSON 字符串：如
data-config='{"theme":"dark"}'，必须JSON.parse(el.getAttribute('data-config'))，且包try/catch - ✅ 判断是否存在：用
el.hasAttribute('data-disabled')，别用dataset.disabled !== undefined - ⚠️ dataset 适合场景：纯配置类字段，比如
data-role="modal"、data-index="5"，且命名严格规范
真正容易被忽略的是：所有 data-* 值都是字符串，哪怕你写 data-count="0"，el.dataset.count + 1 结果是 "01"。没人替你做类型转换，也没人替你做持久化 —— 这两件事，得你自己用 localStorage 和显式类型判断来补全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
