如何通过设置网页元素的数据属性（_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 是原始字符串直取。