按钮需绑定JS逻辑实现加购，含data属性、防重复点击、fetch调用、错误处理、本地存储策略及加载状态管理。
点击按钮触发加入购物车逻辑
核心不是 HTML 本身能“加入购物车”，而是用 button 或 a 触发 JavaScript 行为，把商品信息（如 id、quantity）提交给后端或更新前端购物车状态。
常见错误是只写个 <button>加入购物车</button> 却没绑定任何动作，点完毫无反应。
- 按钮必须有明确的
data-id、data-price等属性，方便 JS 读取，比如：<button data-id="1024" data-price="29.9" class="add-to-cart">加入购物车</button> - 不要用
<a href="#"></a>模拟按钮——容易触发页面跳转或锚点滚动，改用button+type="button" - 加
disabled状态防重复点击：button.disabled配合 CSS 灰掉按钮，JS 提交前设btn.disabled = true，响应后恢复
fetch 提交到 /api/cart/add 接口
现代前端通常用 fetch 调后端购物车接口，而不是表单提交。后端需返回标准 JSON（如 { "success": true, "cartItemCount": 3 }），前端据此更新徽标数字或弹提示。
容易忽略的是错误处理：网络失败、库存不足、未登录等都会导致接口返回非 2xx 状态或 success: false，但很多代码只写了 then 没写 catch 或检查 response.ok。
立即学习“前端免费学习笔记（深入）”；
- 必须检查
response.status：401 要跳登录，400 要读response.json()取具体错误信息（如"库存不足"） - POST 数据用
JSON.stringify({ productId, quantity })，且请求头设Content-Type: application/json - 避免在循环里多次调用
fetch加入多个商品——应合并为一个批量接口，如/api/cart/add-batch
本地购物车状态怎么存才不丢
如果没登录，或只是临时体验，可用 localStorage 存简单数组，但别直接存整个对象引用；登录后必须以服务端为准，本地只做乐观更新（先改 UI，再发请求，失败则回滚）。
常见坑是把购物车存在 sessionStorage——关掉标签页就清空，用户刚加完东西切个网页就没了。
-
localStorage存字符串，记得JSON.stringify和JSON.parse，否则取出来是[object Object] - 每次修改后手动触发事件（如
dispatchEvent(new Event('cart-updated'))），让其他模块（如顶部购物车徽标）能监听并刷新 - 不要存敏感字段：比如
price应以服务端返回为准，本地只存id和quantity，防止篡改
按钮加载中状态和防抖
用户手快连点两次，可能发两个重复请求，后端没做幂等就会多加一条记录。光靠后端防护不够，前端要主动压制。
不是所有“防抖”都适用：debounce 会延迟首次点击，这里需要 immediate + trailing 的节流逻辑，或者更简单的——请求发出后立刻禁用按钮，成功/失败后再启用。
- 点击后立即设
button.textContent = '添加中...'; button.disabled = true; - 用
AbortController控制请求生命周期，比如用户快速切走页面，可主动abort()避免无意义回调执行 - 如果按钮在列表项里（如商品卡片），确保每个
button绑定的是对应卡片的data-id，别用全局变量或闭包错拿上一条数据
真正难的不是点一下加进去，而是加得准、加得稳、加了不丢、错了知道为什么错——尤其是库存变化快、网络不稳定、用户反复操作时，边界情况比主流程更耗精力。
