data-* 属性必须用短横线分隔单词，浏览器自动转为 camelCase 供 dataset 使用；dataset 是读写首选，仅支持字符串，禁存敏感或大量数据，非框架状态管理方案。
data-* 属性必须用连字符分隔单词
HTML5 允许在任意元素上添加以 data- 开头的自定义属性，但命名有硬性规则：不能包含大写字母、不能用下划线或驼峰，必须用短横线（-）连接单词。比如 data-user-id 合法，data_userId 或 dataUserId 都会被浏览器忽略或无法通过标准 API 正确读取。
浏览器会自动把短横线命名转为 camelCase 形式供 JavaScript 使用，所以 data-last-login-time 在 JS 中对应 dataset.lastLoginTime。
dataset API 读写 data 属性最可靠
不要用 getAttribute() 或 setAttribute() 直接操作 data-*，虽然能写入，但 dataset 才能自动处理命名转换和类型映射。
-
element.dataset.fooBar读取data-foo-bar的值（字符串） -
element.dataset.fooBar = "123"写入后，DOM 中会自动同步为data-foo-bar="123" - 写入
null或undefined会移除该属性；写入数字/布尔值会被自动转成字符串 - 不支持嵌套对象或数组——
dataset只存字符串，复杂数据得自己JSON.stringify()和JSON.parse()
data 属性不适合存大量或敏感数据
data-* 是为组件状态、标识、轻量上下文设计的，不是存储层：
立即学习“前端免费学习笔记（深入）”；
- 所有 data 属性都会暴露在 HTML 源码里，**不能存 token、密码、用户身份证号等**
- 存大段 JSON 或长文本会导致 HTML 膨胀、影响可读性和解析性能
- 服务端渲染时若动态注入敏感值，可能被爬虫或前端调试轻易获取
- 需要持久化或跨页面共享？优先考虑
localStorage、sessionStorage或服务端 session
Vue/React 等框架里 data 属性常被绕过
框架组件通常用 props、state 或 context 管理数据，data-* 很少作为主要通信方式：
- Vue 模板中写
:data-id="item.id"不生效——绑定的是属性而非 attribute，应改用v-bind:attr.data-id="item.id"（Vue 3）或v-bind:data-id="item.id"（Vue 2） - React 中
data-*属于合法 prop，可直接写data-user-id={id}，但 JSX 会原样透传到 DOM，无额外逻辑 - 框架组件内部若依赖
dataset，需确保 DOM 已挂载且属性已渲染完成，避免读到空值
真正要用好 data-*，关键是守住边界：它只是 DOM 元素的“便签纸”，不是数据库，也不是状态总线。写之前先问一句——这个值是否必须贴在 HTML 上？是否允许被用户右键查看？是否只用于当前交互上下文？答错一个，就该换方案。
