data-*属性用于在HTML中存储私有数据，如产品ID和状态，通过dataset API以驼峰命名法访问，便于JavaScript读取，提升组件灵活性与代码可维护性。
HTML5 的 data-* 自定义属性提供了一种在 HTML 标签中嵌入私有数据的方式，让开发者可以在不破坏语义结构的前提下，将额外信息直接绑定到元素上。这种机制简化了前端与 JavaScript 之间的数据传递，成为一种轻量、直观的数据存储方案。
存储与元素相关的私有数据
通过 data-* 属性，可以为某个 DOM 元素附加自定义信息，比如产品 ID、状态标识、提示文本等。这些数据不会显示在页面上，但可以通过 JavaScript 轻松读取和操作。
例如：<div id="product-123" data-product-id="123" data-price="99.99" data-in-stock="true"> 商品名称 </div>
JavaScript 可以这样获取数据：
const el = document.getElementById('product-123');
console.log(el.dataset.productId); // "123"
console.log(el.dataset.price); // "99.99"增强组件行为控制能力
在构建可复用的 UI 组件时，data-* 属性常用于配置组件的行为或样式。比如一个弹窗组件可以根据 data-trigger 判断触发方式，或根据 data-delay 设置自动关闭时间。
立即学习“前端免费学习笔记（深入）”；
- 避免将配置写死在 JS 中，提升灵活性
- 便于非开发人员（如运营）通过修改 HTML 调整功能参数
- 支持动态更新属性值并实时响应变化
与 JavaScript 解耦，保持语义清晰
相比使用 class 名或 id 来“暗示”某种行为（如 class="auto-close-5"），data-* 更明确地表达了“这是数据”的意图，使代码更具可读性和维护性。
同时，这类属性不会影响 CSS 样式或布局，也不会干扰 ARIA 属性，专用于数据承载，职责单一。
dataset API 提供便捷访问接口
所有 data-* 属性都会自动映射到元素的 dataset 对象中，键名采用驼峰命名法（kebab-case → camelCase）。
-
data-user-name→el.dataset.userName -
data-api-endpoint→el.dataset.apiEndpoint
这使得读写自定义数据变得非常方便，无需解析字符串或遍历属性。
基本上就这些。data-* 不是用来替代全局状态管理或本地存储的，而是在 DOM 层面组织局部、关联性强的小量数据的好方法。用得恰当，能让前端逻辑更简洁清晰。
