<p>data-* 属性是受命名规则、访问方式和生命周期限制的原生机制，命名须小写连字符、JS 通过 dataset 驼峰读取，写入须用 setAttribute，值恒为字符串，不跨页面、不持久、不可替代状态管理。</p>
HTML data-* 属性不是“随便加个属性就能传数据”的快捷键，它是一套有命名约束、访问逻辑和生命周期限制的原生机制。用错名字、混用 API、误判类型，都会导致 JS 读不到值或行为意外。
data-* 属性名写不对，JS 就永远读不到
浏览器解析时强制小写 + 连字符，任何大写字母、下划线、数字开头（不带连字符）都会被忽略——DevTools 里都看不到该属性，dataset 当然返回 undefined。
-
data-user-id✅ → JS 中用el.dataset.userId -
data-api-url✅ → JS 中用el.dataset.apiUrl -
data-2024-report✅ → 但必须用el.dataset["2024Report"]（点号无法访问） -
data-userId❌ → 解析成data-userid，el.dataset.userId是undefined -
data_user_id❌ → 浏览器直接跳过，不存入 DOM
dataset 读写不能和 setAttribute/getAttribute 混用
dataset 是内存缓存视图，setAttribute 才真正更新 DOM。混用会导致读写不一致，调试时值对不上。
- 读取优先用
el.dataset.xxx（自动驼峰、语义清晰） - 写入必须用
el.setAttribute("data-xxx", "value")（否则下次刷新或重读仍是旧值） - 判断是否存在：先
"xxx" in el.dataset，再取值，避免undefined报错 - 删除属性推荐
delete el.dataset.xxx，比removeAttribute("data-xxx")更安全（后者不触发 dataset 更新）
存进去的是字符串，别当布尔/数字/对象直接用
dataset 暴露的永远是字符串。存 data-is-pending="false"，读出来是字符串 "false"，不是布尔 false；存 JSON 字符串不解析，就只是字符串。
立即学习“前端免费学习笔记（深入）”；
- 布尔判断别写
Boolean(el.dataset.isPending)→ 改用el.dataset.isPending === "true" - 数字转换用
+el.dataset.count或Number(el.dataset.count)，别=== 0直接比 - JSON 数据必须手动
JSON.parse(el.dataset.config || "{}")，且加try/catch防止服务端未转义导致语法错误 - 敏感字段如
data-token、data-phone绝对禁止 —— 页面源码明文可见
data-* 不跨页面、不持久、不替代状态管理
它只绑定在当前 DOM 节点上，刷新即丢，跳转即失。想跨页面传参？data-* 不是解决方案。
- 跨页面传递：用 URL 参数（
?uid=123），接收页用new URLSearchParams(window.location.search)解析 - 跨刷新/跨标签页共享：用
localStorage，但必须JSON.stringify()存、JSON.parse()取，并处理null返回值 - SSR 或 React/Vue 场景：
data-*默认不透传到客户端根节点，需显式配置或改用getAttribute("data-xxx")安全读取 - 别用它替代组件状态（如 React 的
useState）或全局状态管理（如 Redux/Zustand）
最常被忽略的其实是生命周期：它不是存储，只是挂载。你给按钮写了 data-id="456"，用户点击后 JS 读到了，但页面一刷新，这个 456 就没了——它从不自动同步、不自动持久、不自动继承。依赖它做跨环节逻辑，八成会在某个深夜发现数据突然消失。
