如何通过设置网页元素的数据属性（_data-*前缀）来自定义存储私有交互数据？

本文共计908个文字，预计阅读时间需要4分钟。

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 优化。用之前先问一句：这个值，是不是非得跟这个元素绑死？如果不是，大概率有更好的组织方式。