<p>data-* 属性仅用于存储静态、轻量、非敏感的上下文信息，命名须小写连字符（如data-order-status），JS中通过dataset.orderStatus访问，写入必须用setAttribute，值恒为字符串且明文可见。</p>
data-* 属性不是前端状态容器，它只适合存静态、轻量、非敏感的上下文信息；用错场景（比如当 React state 用、存 token 或大段 JSON）会立刻引发安全或性能问题。
data-* 属性名必须用 kebab-case 小写连字符
浏览器只识别 data-order-status、data-api-endpoint 这类全小写+连字符的写法。data-userId、data_user_id、data-UserID 全部无效——DOM 中查不到，dataset 也取不到。
常见错误现象：element.dataset.userId 返回 undefined，但 HTML 里明明写了 data-userId="123"；根源就是命名不规范，浏览器压根没解析进 dataset。
- HTML 中一律写成
data-order-status、data-item-index - JS 中通过
element.dataset.orderStatus访问（连字符自动转驼峰） - 含数字开头的属性如
data-2024-year，只能用方括号：element.dataset["2024Year"]
dataset 是只读代理，写入必须用 setAttribute
element.dataset.foo = "bar" 看似能改值，实际只是操作内存副本；刷新页面后，原始 HTML 的 data-foo 值不变。真正要持久化，必须调用 setAttribute。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 读取优先用
element.dataset.xxx（语义清晰、自动转换） - 写入必须用
element.setAttribute('data-xxx', 'value') - 避免混用：
dataset.foo = 'a'和setAttribute('data-foo', 'b')会导致两个值不一致，dataset.foo仍返回'a'
data-* 的值永远是字符串，JSON 得手动 parse
dataset 值恒为字符串，哪怕你写 data-count="0"，el.dataset.count + 1 会变成 "01"（字符串拼接）；存对象必须先 JSON.stringify()，读取时再 JSON.parse()，且必须包 try/catch。
-
const jsonStr = el.getAttribute('data-config')→ 安全获取原始字符串 let config; try { config = JSON.parse(jsonStr); } catch (e) { config = {}; }- 服务端渲染（SSR）输出前，必须对 JSON 字符串做 HTML 实体编码，否则
JSON.parse()易报SyntaxError
什么时候该用 data-\*，而不是 class 或 JS 变量
核心判断标准：这个信息是否「只供 JS 使用，不参与样式或语义」。class 用于样式和状态标记（如 is-loading），而 data-* 是纯数据容器。
- 适合：
data-testid（测试定位）、data-track-id（埋点）、data-action="delete"（事件委托） - 不适合：token、手机号、用户权限对象、列表分页参数等——这些应存在
Map、闭包变量或框架响应式状态中 - 事件委托时，用
event.target.closest('[data-action]')向上找最近带属性的祖先，比直接event.target.dataset.action更可靠
真正容易被忽略的是：data-* 的值始终是字符串，没人替你做类型兜底；而且所有值都明文暴露在源码里，连 DevTools 都不用开，右键“查看页面源代码”就全看见了。
