应使用 addEventListener 绑定事件并委托至商品列表容器，通过 data-product-id 获取 ID 调用 addToCart；该函数需校验商品、更新本地状态与 localStorage、同步库存并提交请求；UI 需实时反馈按钮状态与购物车徽标，localStorage 必须 JSON 序列化存取。
点击按钮时如何正确触发添加商品逻辑
购物车按钮本身只是个触发器，真正起作用的是绑定的 JavaScript 事件处理函数。别把 onclick 写成内联属性（比如 onclick="addToCart(id)"），容易污染 HTML、难调试、也不利于复用。推荐用 addEventListener 绑定，且确保事件委托到动态生成的商品列表容器上——尤其当商品是异步加载或分页渲染时。
常见错误现象：Uncaught TypeError: addToCart is not defined，本质是函数未声明或作用域不对；或者点击无反应，其实是按钮没加 type="button"，被默认当成 submit 导致页面刷新。
- 给按钮统一加
data-product-id属性，值为商品唯一标识（如data-product-id="1024"） - 监听父容器（如
id="product-list"）的click事件，用event.target.matches('button[data-action="add-to-cart"]')判断是否点中目标按钮 - 从
event.target.dataset.productId取 ID，再调用核心函数addToCart(productId)
addToCart 函数该做哪些事才算“加进去了”
“加进去”不是只弹个提示框，而是要同步更新本地状态 + 可选地提交到后端。如果跳过状态管理直接发请求，用户连点两次可能重复提交；如果只改内存不存 localStorage，刷新就丢数据。
典型遗漏点：没检查库存。用户点的时候显示有货，但并发下单时可能已售罄，addToCart 必须接收服务端返回的实际结果（比如 { success: true, quantity: 2, stock: 1 }），而不是假设“点了就一定成功”。
立即学习“前端免费学习笔记（深入）”；
- 先校验
productId是否有效、是否已存在购物车中（用cartItems.find(item => item.id === productId)） - 若存在，只更新
quantity；若不存在，推入新对象（含id、name、price、quantity） - 调用
saveCartToStorage(cartItems)持久化到localStorage，键名建议用"cart_v2"而非简单"cart"，方便后续升级格式 - 发起
fetch('/api/cart', { method: 'POST', body: JSON.stringify({ id: productId, quantity: 1 }) })，并用响应体更新本地stock字段
按钮状态和 UI 反馈怎么避免误导用户
按钮文字不能永远是“加入购物车”。加完变“已加入”，再点应变为“+1”或“去结算”；正在请求时必须禁用并显示 loading 状态，否则用户狂点导致重复请求。
容易踩的坑：用 button.disabled = true 后忘记在请求结束时恢复；或者用 CSS 隐藏 loading 图标但没控制按钮文字切换，导致界面上写着“加入购物车”实际却点不动。
- 点击后立即设
button.disabled = true并切换textContent为"添加中..." - 请求成功后，根据返回的
cartCount更新顶部购物车徽标（如document.querySelector('.cart-badge').textContent = cartCount） - 用
button.classList.toggle('added')控制样式，配合 CSS 实现“已加入”状态的背景色/图标变化 - 失败时要还原按钮状态，并用
alert或更友好的 toast 提示具体原因（如"库存不足，请稍后再试"）
为什么 localStorage 里存数组会出问题
直接 localStorage.setItem('cart', cartItems) 是错的——cartItems 是数组，会被自动转成字符串 "[object Object],[object Object]"，取出来就废了。必须显式序列化和反序列化。
另一个隐藏雷区：不同浏览器对 localStorage 容量限制不同（通常 5MB），但单个 key 的值如果超过约 2MB，Safari 会静默失败，且不报错。大购物车（比如上百件商品带图片 URL）得考虑分片或降级策略。
- 存的时候必须用
JSON.stringify(cartItems) - 取的时候必须用
JSON.parse(localStorage.getItem('cart') || '[]')，并包裹try...catch防止损坏数据导致整个购物车不可用 - 每次修改后检查
cartItems.length和平均单条大小，超 50 条或预估超 1MB 就该清空过期项或提醒用户结算
addToCart 成功回调里手动更新 DOM 或商品数据源。 
