常见问题及解决方案：1. quantity更新错位因共用dom或监听器未绑定到具体商品行，需用data-id唯一标识并事件委托；2. 单价应存纯数字避免解析错误；3. 按钮需设最小尺寸、防重复点击；4. cart数据须存localstorage并同步结构；5. 库存校验必须服务端执行。

点击加减按钮时，quantity 没更新或更新错位

常见原因是多个商品共用同一组 DOM 元素或事件监听器没绑定到具体商品行。比如用 document.querySelector('.btn-plus') 只取第一个按钮，所有商品都改同一个 quantity。

• 每个商品行必须有唯一标识，推荐用 data-id（如 <div class="cart-item" data-id="101">）<li>事件监听器要委托到容器，再从 <code>event.target 向上找最近的 .cart-item，再读它的 data-id
• quantity 输入框必须是 type="number"，且设 min="1"，避免用户手动输负数或空值

updateTotalPrice() 计算结果不准

价格计算出错通常不是公式问题，而是数据类型没统一：商品单价可能是字符串 "29.99"，数量是数字，但 "29.99" * "2" 在 JS 中会隐式转成数字，看似没问题——可一旦单价含逗号、货币符号或空格（如 "¥29.99"），parseFloat 就会截断或返回 NaN。

• 单价字段在渲染时就该剥离非数字字符，存为纯数字（如 price: 29.99），别留着 <span>¥29.99</span> 再现场解析
• 总价计算用 Number(price) * Number(quantity)，再用 toFixed(2) 保留两位小数，但注意 toFixed 返回字符串，后续累加前要再转 Number
• 避免在循环里反复调用 innerHTML 更新每行小计，先算好再批量写入，减少重排

移动端点击无响应或连点触发多次

手指轻点容易触发 click 和 touchstart 两次，导致数量+2；或者按钮太小，iOS Safari 默认不响应小于 44px 的点击区域。


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
• 加减按钮必须设 min-width: 44px; min-height: 44px，并加 user-select: none
• 用 event.preventDefault() 阻止默认行为，同时监听 touchstart 替代 click（或两者都绑，但加节流）
• 加个简单防抖：按钮被点击后 300ms 内忽略后续点击，用 disabled 属性临时禁用比定时器更可靠

页面刷新后购物车数量丢失

只要没存到持久化位置，刷新等于重置。localStorage 是最直接的方案，但要注意键名设计和数据结构同步。

• 不要只存 quantity，而应存完整商品项数组，例如：[{id: "101", quantity: 3}, {id: "102", quantity: 1}]
• 每次修改后立刻调用 localStorage.setItem('cart', JSON.stringify(cartItems))，读取时用 JSON.parse 并做 try/catch 防止损坏数据
• 服务端渲染（SSR）页面首次加载时，DOM 渲染完再读 localStorage，否则可能因 DOM 还没挂载导致找不到元素

实际联动逻辑里最容易被忽略的，是「数量变更后是否触发库存校验」——前端加减可以拦住超限，但用户可能绕过界面直接改 localStorage，所以最终提交时仍需服务端校验，不能只信前端传来的 quantity。