直接在按钮上添加data-product-id和data-sku-id属性即可，如<button data-product-id="1024" data-sku-id="sku-789">加入购物车</button>；JS通过el.dataset.productId和el.dataset.skuId安全读取，注意空值校验与字符串转数字处理。
怎么用 data-* 属性给「加入购物车」按钮存商品 ID 和规格
直接在按钮上加 data-product-id 和 data-sku-id 就行，这是最轻量、兼容性最好、也最符合语义的做法。浏览器原生支持，JS 拿起来不费劲，也不用依赖框架或额外状态管理。
常见错误是把数据塞进 id 或 class 里（比如 id="btn-1024-red"），后期解析麻烦还容易冲突；或者用自定义属性但拼错前缀（写成 product-id 而不是 data-product-id），导致 dataset 读不到。
-
data-开头的属性会自动映射到元素的dataset对象，驼峰化命名（data-sku-id→el.dataset.skuId） - 值必须是字符串，数字或对象要先
JSON.stringify再存，读取时注意JSON.parse - 避免存大量数据（比如整个商品对象），只放关键索引字段，查详情走 API
<button class="add-to-cart"
data-product-id="1024"
data-sku-id="sku-789"
data-price="29.9"
data-stock="12">加入购物车</button>点击时怎么安全读取并传给购物车逻辑
别在 onclick 行内写 JS，也别用 querySelectorAll('.add-to-cart') 后遍历绑定——DOM 动态插入的新按钮会漏掉。用事件委托最稳。
核心是监听父容器（比如 .product-list），判断点击目标是否匹配按钮选择器，再取 dataset。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器存在且不会被频繁替换，否则委托失效
-
event.target可能是按钮内的图标或文字节点，要用event.target.closest('.add-to-cart')安全捕获 - 检查
dataset.productId是否存在，空值或undefined要兜底处理，避免后续逻辑崩
document.querySelector('.product-list').addEventListener('click', (e) => {
const btn = e.target.closest('.add-to-cart');
if (!btn) return;
<p>const pid = btn.dataset.productId;
const sku = btn.dataset.skuId;
const price = parseFloat(btn.dataset.price) || 0;</p><p>addToCart({ productId: pid, skuId: sku, price });
});如果用了 Vue/React，还要手动绑 data-* 吗
不用硬写 data- 属性——框架的数据流更可控。但要注意：服务端渲染（SSR）或 SEO 场景下，仍建议保留关键 data- 属性，作为降级或爬虫可读的“事实来源”。
比如 Vue 中你可以在模板里写：<button @click="handleAdd(item.id, item.sku)" :data-product-id="item.id">，既满足响应式交互，又留了静态数据锚点。
- React 的
data-属性写法一样，但注意 JSX 中要用dataProductId（驼峰）对应 HTML 的data-product-id - 框架里优先用
props或state传参，dataset只用于跨框架通信、埋点或调试场景 - 不要在框架组件里反复读
dataset来驱动 UI，这会破坏响应式链路，造成状态不一致
为什么 sessionStorage / localStorage 不适合存按钮原始数据
因为它们是全局存储，和 DOM 节点无绑定关系。用户可能同时打开多个商品页，或快速切换 SKU，靠存储键名（如 "lastClickedProduct"）根本无法区分上下文。
更严重的是：页面刷新后，按钮还在，但 storage 里的数据可能已过期、被覆盖，或与其他操作冲突（比如刚点完加入购物车，又点了收藏，storage 被改写了）。
-
data-属性随 DOM 存在，天然隔离、即时、无副作用 - storage 适合存用户偏好、登录态、购物车快照这类跨页面/会话的持久数据
- 真要用 storage 做中转，也得配合唯一标识（如按钮
id或时间戳）加前缀，不能裸存
实际项目里最容易被忽略的，是动态生成按钮后忘记补 data- 属性，或者没做 dataset 的类型校验（比如 dataset.count 是字符串 "0"，直接参与运算就出错）。写的时候多看一眼控制台输出，比事后 debug 快得多。
