data-属性非双向绑定，修改dataset会更新HTML但反之不成立；购物车需用data-id和data-price携带唯一标识与原始单价，读取后须parseFloat()转数字，修改后需手动同步DOM、内存和localStorage。
data- 属性不是“绑定”机制，它不自动同步 JS 变量和 HTML 属性值——你改了 dataset，HTML 上的 data-* 会变；但你手动改了 HTML 的 data-price="299.00"，JS 里的 item.price 不会自动更新。这是初学者最常误以为“双向绑定”的地方。
为什么购物车必须用 data-id 和 data-price
每个商品 DOM 节点需要携带可被 JS 精准识别的元数据，而不是靠 class 名、文本内容或节点顺序来查找。比如点击“减1”按钮时，JS 必须立刻知道：这是哪件商品？原价多少？当前数量在哪存？data-item-id="prod-789" 提供唯一标识，data-price="299.00" 提供原始单价（字符串，需 parseFloat() 转换），二者缺一不可。
- 别用
class="item-789"当 ID——CSS 类名是样式语义，不是数据标识；JS 用getElementsByClassName返回的是动态集合，容易误操作 - 别把价格写成
<span>¥</span><span>299</span><span>.00</span>——后续提取要拼接或正则，增加出错概率 - 如果商品来自后端 API，
data-id应直接映射接口返回的id字段，避免前端额外维护映射表
dataset 读取时的隐式类型陷阱
element.dataset.price 拿到的是字符串 "299.00"，不是数字。直接参与计算会导致 "299.00" * 2 === "299.00299.00" 这种字符串重复拼接，或者 NaN（比如字段为空或含空格）。
- 所有涉及计算的
data-*值，都必须显式转换：parseFloat(btn.dataset.price) || 0 - 不要依赖
Number()或一元加号+——它们对空字符串、" 123 "、"123.00abc"处理不一致 - 价格字段建议统一保留两位小数格式（如
data-price="299.00"），方便后期做货币格式化，也避免299.5被转成299.5后再四舍五入出错
修改 data- 后 DOM 并不“自动重渲染”
改了 item.dataset.quantity = "3"，只是更新了属性值，不会触发任何 UI 变化。购物车里数量显示、总价、禁用状态等，都得你手动更新对应 DOM 节点的 textContent 或 value。
立即学习“前端免费学习笔记（深入）”；
- 数量
<input type="number" value="2">改变后，只改dataset.quantity不够，还得同步input.value = "3" - 删除按钮点击后，除了从数组里
splice()，还要调用localStorage.setItem('cart', JSON.stringify(cartArray))，否则刷新就丢数据 - 别用
innerHTML += ...刷新整个购物车列表——会销毁所有已绑定的事件监听器，导致“点一次加两次”或“点不动”
真正难的不是写对 data-，而是每次 DOM 操作后，是否同步更新了内存数据、本地存储、界面显示三者。漏掉任意一环，购物车就会“看起来动了，其实没动”或者“动了但存不住”。
