自定义数据属性是以data-开头的HTML属性，用于存储私有信息，通过JavaScript的dataset访问，如data-user-id对应dataset.userId，适合存储轻量级元信息，但不宜存敏感或大量数据。
在HTML5中，使用自定义数据属性（Custom Data Attributes）是一种合法且推荐的方式，用来在HTML元素上存储额外的私有信息。这些数据不会显示给用户，但可以通过JavaScript轻松读取和操作，非常适合用于增强网页的交互功能。
什么是自定义数据属性？
自定义数据属性是以 data- 开头的属性，可以附加到任何HTML元素上。它们的命名规则简单：以data-为前缀，后接你自定义的名称。例如：
用户信息
这些属性不会影响页面渲染，也不会被浏览器默认处理，完全由开发者控制。
立即学习“前端免费学习笔记（深入）”；
如何读取和设置数据属性？
通过JavaScript的dataset属性，可以方便地访问所有自定义数据。注意：属性名中的连字符（-）会被转换为驼峰命名法。
例如，对于data-last-login，在JS中对应的是lastLogin。
示例代码：
let element = document.querySelector('div');
console.log(element.dataset.userId); // 输出: 123
console.log(element.dataset.role); // 输出: admin
element.dataset.lastLogin = '2024-05-01'; // 修改值
实际应用场景
自定义数据属性适合存储轻量级、与DOM元素相关的元信息。常见用途包括：
- 存储API返回的ID，便于后续请求时识别元素
- 标记元素状态，如是否已加载、是否选中
- 传递配置参数给JavaScript插件或组件
- 配合CSS使用，实现基于数据的状态样式切换
比如做一个商品列表：
点击时可以直接获取商品信息进行操作，无需再查表或发请求。
注意事项
虽然使用方便，但也需注意几点：
- 不要用它存储敏感信息，因为所有数据都在源码中可见
- 不适合存储大量数据，会影响页面性能和结构清晰度
- 确保属性名语义清晰，避免缩写造成后期维护困难
- 如果需要响应式数据或复杂状态管理，应考虑使用JavaScript状态对象而非过度依赖data属性
基本上就这些。合理使用自定义数据属性能让HTML和JavaScript协作更自然，提升开发效率。
