纯HTML+JavaScript实现购物车需用HTML结构、CSS样式、JS交互，核心是添加商品、更新数量、计算总价，配合localStorage持久化与事件委托绑定。
怎么用纯 HTML + JavaScript 实现基础购物车功能
纯 HTML 本身不能实现购物车的增删改查逻辑，必须配合 JavaScript 操作 DOM 和状态。所谓“HTML 购物车页面”，实际是用 HTML 写结构、CSS 控制样式、JavaScript 驱动交互。最简可行方案只需 3 个核心操作：添加商品、更新数量、计算总价。
- 商品数据建议先用数组模拟，例如：
[{id: 1, name: "iPhone", price: 5999, qty: 1}] - 每个商品行用
<div class="cart-item">包裹，绑定data-id方便查找 - 数量输入框必须加
type="number"并设min="1"，避免用户输负数或空值触发NaN - 别直接用
innerHTML += ...动态拼接购物车列表——会重置所有已绑定的事件监听器
为什么点击“加入购物车”后没反应？常见 JS 绑定失效原因
多数问题出在事件监听器注册时机不对，或元素动态生成后未重新绑定。
- 如果按钮是页面加载后通过 JS 插入的（比如商品列表异步渲染），不能在
DOMContentLoaded里用querySelectorAll(".add-btn").forEach(...)——此时按钮还不存在 - 正确做法是用事件委托：
document.addEventListener("click", e => { if (e.target.matches(".add-btn")) { addItem(e.target.dataset.id); } }); - 确保
dataset.id有值：检查按钮是否写了data-id="2"，而不是id="2"或value="2" - 控制台报错
Cannot read property 'addEventListener' of null？说明querySelector没找到对应元素，检查选择器拼写和执行顺序
localStorage 保存购物车时为什么刷新就丢数据？
因为没在每次修改后调用 localStorage.setItem("cart", JSON.stringify(cartArray))，或者存了无法序列化的值（比如函数、DOM 元素）。
- 只在页面卸载时用
beforeunload存一次？不够——用户可能直接关标签页，该事件不总触发 - 每次调用
addItem()、updateQty()、removeItem()后都应同步写入localStorage - 读取时要做容错：
const cart = JSON.parse(localStorage.getItem("cart") || "[]");，防止首次访问时getItem返回null - 注意：Safari 在无痕模式下会直接拒绝
localStorage写入，需加try/catch并降级为内存存储
计算总价时出现 NaN 或小数精度错误怎么办
本质是 JavaScript 浮点运算缺陷 + 类型混用。例如 "99.99" * "2" 看似正常，但 "99.99" * "0.1" 会得 9.998999999999999。
立即学习“前端免费学习笔记（深入）”；
- 所有价格字段必须用
parseFloat()显式转数字，别依赖隐式转换 - 金额运算统一用「分」为单位（整数）：后端传 5999 表示 59.99 元，前端显示时再除以 100
- 显示价格用
toFixed(2)格式化，但注意它返回字符串——别拿它再参与计算 - 总价累加推荐用
reduce：cart.reduce((sum, item) => sum + item.price * item.qty, 0)，比 for 循环少出错
真实项目里购物车远不止这些：库存校验、优惠券叠加、跨端同步、服务端落库……但本地快速验证逻辑，这四块补全后，页面就能稳住基本盘。别急着套框架，先把 localStorage 读写和数量变更的响应链跑通。
