应直接在<button>标签中使用data-前缀属性，如data-product-id="1001"存商品ID、data-sku="A22-BLUE-L"存规格、data-price="299.00"存价格、data-in-stock="true"存库存状态；命名须全小写加连字符，JS通过dataset.productId安全读取，禁存敏感信息或JSON字符串。
怎么用 data- 属性给加入购物车按钮加自定义信息
直接在 <button> 标签里写 data- 开头的属性就行，浏览器原生支持，不需要额外库。这类属性专门用来存 JS 逻辑需要但 HTML 本身不解释的数据，比如商品 ID、SKU、价格、库存状态。
常见错误是写成 id、class 或自定义非 data- 前缀（如 product-id="123"），这种写法虽然浏览器不会报错，但不符合 HTML5 规范，JS 里用 dataset 读不到，也过不了 W3C 验证。
-
data-product-id="1001"—— 存唯一商品标识，后端接口要用 -
data-sku="A22-BLUE-L"—— 存具体规格，选色选码后动态更新这个值 -
data-price="299.00"—— 存当前展示价格（注意用字符串或数字都行，但建议统一为字符串避免小数精度问题） -
data-in-stock="true"—— 存库存状态，JS 可据此禁用按钮或提示“缺货”
JavaScript 怎么安全读取这些 data- 属性
别用 getAttribute() 硬读，优先走 dataset API，它会自动把短横线转驼峰（比如 data-product-id → dataset.productId），更简洁也更健壮。
容易踩的坑：属性名含数字开头（如 data-2nd-try="yes"）会导致 dataset.2ndTry 语法错误；含大写字母（data-ProdID）会被强制转小写（dataset.prodid），所以命名全小写加短横线最稳妥。
立即学习“前端免费学习笔记（深入）”；
示例：
const btn = document.querySelector('[data-action="add-to-cart"]');
console.log(btn.dataset.productId); // "1001"
console.log(btn.dataset.inStock); // "true"（注意是字符串）
要不要用 data- 存敏感信息或大量数据
不要。这些属性会直接暴露在 HTML 源码里，用户右键“查看页面源代码”就能看到。价格、折扣、用户权限等不该前端明文存储。
另外，别塞 JSON 字符串进去（比如 data-item='{"id":1,"name":"shirt"}'）。虽然能 parse，但可读性差、易出错、不方便调试。真要传结构化数据，用多个独立 data- 属性更清晰，或者改用 <script type="application/json"> 块。
- ✅ 推荐：
data-product-id="1001" data-product-name="纯棉T恤" - ❌ 避免：
data-item='{"id":1001,"name":"纯棉T恤"}' - ❌ 绝对禁止：
data-user-token="abc123..."、data-discount-secret="50%"
服务端渲染时怎么动态注入 data- 属性
如果是 PHP/Node.js/Jinja 等模板引擎，直接插值就行，注意做 HTML 转义防止 XSS。比如在 EJS 里：<button data-product-id="<%= escape(product.id) %>">。
关键点：后端吐出的 data- 值必须是纯字符串，不能带未闭合引号、尖括号或换行。否则整个标签会崩。遇到复杂字段（如商品描述含引号），宁可不用 data-，改用 JS 初始化时通过 API 获取。
React/Vue 用户注意：框架里用 data-* 是安全的，但别在 v-bind: 或 : 缩写里动态拼接属性名（如 :data-[key]="val"），Vue 不支持这种动态属性名写法，老老实实用固定名 + 动态值。
