data-*属性不能存真正私有数据，仅适合挂载公开辅助信息；命名须全小写、含连字符、禁大写字母和空格；值恒为字符串，敏感或复杂数据应存JS变量或Map中。
data-* 属性不能存真正私有的数据，它只是方便你把公开的辅助信息挂载在 DOM 上。 你想用它传用户 ID、订单号、状态码这类前端需要读取但不涉密的信息，没问题；但别指望它防爬、防调试、防篡改——控制台点开就看见，element.dataset.userId 一行就拿到。
data-* 属性命名和写法有哪些硬性限制
浏览器对 data- 后面的部分有明确校验，不符合就直接忽略，不会报错，但属性压根不会进 DOM：
- 属性名必须全小写，
data-UserId或data-userID都无效，得写成data-user-id - 必须至少有一个字符，
data-单独写是非法的 - 不能含大写字母、分号、空格或以
xml开头（大小写都不行） - 值可以是任意字符串，包括空串、数字、JSON 字符串，但注意：它永远是字符串类型
dataset 和 getAttribute 读取结果为什么不一样
dataset 是浏览器自动处理过的接口，getAttribute 是原始字符串直取。比如你写了 data-user-id="123" 和 data-api-url="https://api.example.com"：
-
el.dataset.userId→"123"（自动转驼峰，且强制字符串） -
el.dataset.apiUrl→"https://api.example.com" -
el.getAttribute('data-user-id')→"123"（原样返回） -
el.getAttribute('data-api-url')→"https://api.example.com"
关键区别在于：如果属性名含多个连字符，dataset 会把每个连字符后首字母大写，再拼一起；而 getAttribute 不做任何转换。遇到带数字或特殊符号的命名（如 data-v1-endpoint），dataset.v1Endpoint 在某些老浏览器里可能无法访问，此时只能退回到 getAttribute。
哪些数据绝对不该往 data-* 里塞
只要满足以下任一条件，就别放 data- 里：
- 包含 token、session key、加密密钥等认证凭据
- 敏感业务字段，比如真实手机号、身份证号、银行卡号（哪怕做了简单掩码）
- 结构复杂的数据，比如嵌套对象或数组——虽然你可以
JSON.stringify后塞进去，但每次读取都要JSON.parse，容易出错且不可靠 - 需要频繁更新的高频状态（如计时器毫秒值、滚动位置），DOM 属性读写比 JS 变量慢一个数量级
这类数据该存在 Map 实例里、闭包变量中，或者用 WeakMap 关联 DOM 元素——既安全，又不污染 HTML 结构。
真正容易被忽略的一点：很多人以为 data- 是“前端本地存储”的替代方案，其实它只是 DOM 节点的附加工具标签。它没生命周期管理、没变更通知、不参与 diff、也不触发 reflow/repaint 优化。用之前先问一句：这个值，是不是非得跟这个元素绑死？如果不是，大概率有更好的组织方式。
