标准答案
- data-* 是 HTML 自定义数据属性，浏览器会保留在 DOM 上，JavaScript 可以通过 dataset 读取。
- 它适合存少量和当前元素强相关的数据，例如埋点标识、组件模式、行 id 或声明式初始化参数。
- 它不适合存 token、手机号、邮箱、权限详情等敏感信息，因为用户可以直接在 DOM 中看到。
- 复杂对象、频繁变化的状态和大量数据不应该塞进 data-*，更适合放在应用状态、接口数据或脚本变量中。
- 命名时使用 data-user-id 这类短横线形式，读取时对应 element.dataset.userId。
题目解析
这题要讲清 data-* 是 DOM 上的公开属性，不是安全存储。
它的价值在于让 HTML 和少量脚本行为解耦，适合轻量标记，不适合承担状态管理。
代码示例
dataset 会把 data-user-id 映射成 userId。
HTML
<button data-user-id="42" data-action="follow">
关注
</button>
<script>
const button = document.querySelector('button')
console.log(button.dataset.userId)
console.log(button.dataset.action)
</script>常见误区
- 把 data-* 当成安全存储，把 token 或权限明细写进 DOM。
- 把完整 JSON 大对象塞进属性，导致 HTML 臃肿且转义困难。
- 状态变化后只改 JS 状态，不同步 DOM 属性，却又继续从 dataset 读取旧值。