data-* 属性仅是 DOM 的静态字符串快照，不持久化、非双向绑定、不响应变化；跨刷新存状态需用 localStorage/sessionStorage，修改必须用 setAttribute/removeAttribute，读取推荐 getAttribute，命名须全小写连字符，值恒为字符串。
data-* 属性本身不持久化，刷新页面就丢；它不是状态容器，只是 DOM 节点上的静态字符串快照。真要跨刷新存状态，得靠 localStorage 或 sessionStorage，dataset 只负责桥接 DOM 与 JS 的轻量映射。
为什么 dataset.xxx = 'val' 改了却看不到 HTML 变化
因为 dataset 是只读代理（DOMStringMap），不是双向绑定。你写 el.dataset.userId = '123'，只是更新了内存里的映射副本，原始 data-user-id 属性值没动。DevTools 里查 el.outerHTML 或服务端抓取 HTML 都拿不到新值。
- 真正写入 DOM 必须用
el.setAttribute('data-user-id', '123') - 读取时优先用
el.getAttribute('data-user-id')，避免dataset缓存错乱（比如先设dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo还是'a'） - 删除必须用
el.removeAttribute('data-user-id')，delete el.dataset.userId不生效
data-* 属性名写错导致 dataset 读不到的常见情况
浏览器只解析严格符合规范的 data-*：前缀后必须全小写 + 连字符，不能有大写、下划线、点号或空格。写错就静默忽略，DOM 里根本不存在该属性。
-
data-user-id→ 正确，JS 中读作el.dataset.userId -
data-userId、data_user_id、data-UserID→ 全部无效，el.dataset.userId返回undefined -
data-2024-start-date→ 合法，但必须用el.dataset["2024StartDate"]访问（点号语法不支持数字开头） -
data-api-endpoint→ 正确，对应el.dataset.apiEndpoint，但data-API-Endpoint就失效
如何让 data-* 参与真实生命周期响应
data-* 没有内置监听机制，想“响应变化”，必须手动绑定或结合 Custom Element 生命周期。
- 页面级使用：确保在
DOMContentLoaded后读取，避免 SSR 渲染未完成导致dataset为空 - Custom Element 中：声明
static get observedAttributes() { return ['data-user-id']; }（注意写完整属性名，不是userId） - 在
attributeChangedCallback(attrName, oldValue, newValue)里处理逻辑；首次挂载用this.getAttribute('data-user-id')读初始值 - 别在
constructor里操作 DOM 或发请求——此时元素还没插入文档
真正需要持久化的状态，该交给谁
如果状态要跨页面刷新存在、支持异步加载、带类型或加密需求，data-* 就不该是主力载体。
- 简单布尔/数字状态：存
data-active="true"，读取后手动转类型：el.dataset.active === 'true'或Number(el.dataset.count) - JSON 数据：用
setAttribute('data-config', JSON.stringify(obj))，读取加try/catch和空值兜底：JSON.parse(el.getAttribute('data-config') || '{}') - 需持久化：交由
localStorage.setItem('theme', 'dark')，切换时同步更新和存储 - 敏感或复杂状态：直接用
useState、store或 IndexedDB，别塞进 DOM
容易被忽略的一点：所有 data-* 值都是字符串，哪怕你写 data-count="42"，读出来也是 "42"；类型转换和空值校验必须显式做，没有隐式保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
