data-*属性用于在HTML中存储私有数据，如产品ID和状态，通过dataset API以驼峰命名法访问，便于JavaScript读取，提升组件灵活性与代码可维护性。
HTML5 的 data-* 自定义属性提供了一种在 HTML 标签中嵌入私有数据的方式，让开发者可以在不破坏语义结构的前提下，将额外信息直接绑定到元素上。这种机制简化了前端与 JavaScript 之间的数据传递，成为一种轻量、直观的数据存储方案。
存储与元素相关的私有数据
通过 data-* 属性，可以为某个 DOM 元素附加自定义信息，比如产品 ID、状态标识、提示文本等。这些数据不会显示在页面上，但可以通过 JavaScript 轻松读取和操作。
例如：商品名称
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-* 更明确地表达了“这是数据”的意图，使代码更具可读性和维护性。
citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开
同时，这类属性不会影响 CSS 样式或布局，也不会干扰 ARIA 属性，专用于数据承载，职责单一。
dataset API 提供便捷访问接口
所有 data-* 属性都会自动映射到元素的 dataset 对象中，键名采用驼峰命名法（kebab-case → camelCase）。
-
data-user-name→el.dataset.userName -
data-api-endpoint→el.dataset.apiEndpoint
这使得读写自定义数据变得非常方便，无需解析字符串或遍历属性。
基本上就这些。data-* 不是用来替代全局状态管理或本地存储的，而是在 DOM 层面组织局部、关联性强的小量数据的好方法。用得恰当，能让前端逻辑更简洁清晰。
