真正可用的购物车按钮必须带唯一data-id、type="button"、防重复点击、处理loading和错误，并配合后端或本地存储；价格等只读信息存data属性，禁用innerHTML取值；登录后本地状态仅作乐观更新，错误分支需同等重视。
光写一个 <button>加入购物车</button> 是没用的——它不会自动发请求、不存数据、点完毫无反馈。真正能用的按钮，必须带 data-id、绑定 JS 事件、处理 loading 和错误，并配合后端接口或本地存储逻辑。
按钮 HTML 必须带 data 属性，不能只靠 class 或文字识别
浏览器不知道哪个按钮对应哪件商品。靠文本内容（比如“加入购物车”）去匹配商品 ID 极不可靠，一改文案就崩；靠 class（如 add-to-cart）又无法区分多个商品。
- 每个按钮必须有唯一且可读的
data-id，例如：<button data-id="1024" data-price="29.9" type="button">加入购物车</button> -
type="button"是关键：避免意外触发表单提交或页面跳转 - 不要用
<a href="#">模拟按钮——容易触发锚点滚动或 history 推入，干扰用户体验 - 价格等只读信息建议存在
data-属性里，而不是塞进<p>的value（<p>根本没有value属性，取出来永远是undefined）
JS 绑定 click 时要防重复点击和 loading 状态
用户手快连点两下，前端若不拦截，可能发出两个相同请求。后端即使做了幂等，前端 UI 也大概率错乱（比如徽标数字加两次）。
- 点击前设
btn.disabled = true，并加 CSS 类（如.disabled { opacity: 0.6; cursor: not-allowed; }）视觉反馈 - fetch 成功/失败后都必须恢复
btn.disabled = false，否则按钮永久失效 - 别在循环里对多个商品逐个调
fetch——合并为批量接口（如/api/cart/add-batch），减少请求数和失败概率 - fetch 后务必检查
response.status：401 跳登录页，400 读response.json()提示具体原因（如“库存不足”），不能只写.then()不写.catch()或if (!response.ok)
购物车数据该存在哪里？localStorage 不等于 session
很多人误以为 sessionStorage 是“临时存”，localStorage 是“长期存”，其实关键区别在于生命周期：关标签页就清空的是 sessionStorage，关电脑也不丢的是 localStorage。
立即学习“前端免费学习笔记（深入）”；
- 未登录用户可用
localStorage存简单数组，但必须用JSON.stringify()写、JSON.parse()读，否则取出来是[object Object] - 千万别存
price字段到本地——它必须以服务端返回为准，本地只存id和quantity，防止被篡改 - 每次修改后手动触发自定义事件：
document.dispatchEvent(new Event('cart-updated'))，让顶部徽标等模块能监听刷新 - 登录后，本地状态只是“乐观更新”缓存：先改 UI，再发请求；失败则回滚，不能直接覆盖服务端数据
最常被跳过的环节是错误分支处理——网络中断、401、库存告罄、字段缺失……这些情况出现频率远高于“一切顺利”。写完成功路径后，花同等时间补全 catch 和 response.ok === false 分支，才算真正可用。
