购物车需html结构+原生js交互实现增减、删除、总价计算；推荐用而非；localstorage应存含quantity的对象数组；数量和价格须用parsefloat转数字并校验。
用 HTML + 原生 JS 实现一个可交互的购物车界面
纯 HTML 写不了“能加减、算总价、删商品”的购物车——它需要响应用户操作，必须搭配 JavaScript。HTML 只负责结构和初始展示，JS 才是让购物车动起来的关键。
购物车列表怎么用 <table> 还是 <code><ul></ul>？
优先用 <ul></ul> + <li>。表格语义适合行列对齐的静态数据（比如价格表），而购物车每行有独立按钮、输入框、事件绑定，<ul></ul> 更灵活、更易用 JS 动态增删项，CSS 也更好控制响应式。
常见错误：用 <table> 后发现 <code>document.querySelector('tr[data-id="123"]') 容易因嵌套 <tbody> 或服务端渲染干扰失效；而 <code><li data-id="123"> 直接可靠。
- 每件商品用一个
<li class="cart-item" data-id="1001"> - 数量用
<input type="number" min="1" value="2" data-field="quantity">，别用<select></select>（扩展性差） - 删除按钮写成
<button type="button" data-action="remove">×</button>，避免默认提交行为
localStorage 存购物车时，为什么刷新后数量变回 1？
因为很多人只存了商品 ID 列表（如 ["1001", "1002"]），没存数量。下次读取时，每个 ID 都被当成新加入，quantity 默认取 1。
立即学习“前端免费学习笔记（深入）”；
正确做法是存对象数组：
一个经过完善设计的经典网上购物系统，适用于各种服务器环境的高效网上购物系统解决方案，shopxp购物系统Html版是我们首次推出的免费购物系统源码，完整可用。我们的系统是免费的不需要购买，该系统经过全面测试完整可用，如果碰到问题，先检查一下本地的配置或到官方网站提交问题求助。 网站管理地址：http://你的网址/admin/login.asp 用户名：admin 密 码：admin 提示：如果您
JSON.stringify([
{ id: "1001", quantity: 2, price: 29.9 },
{ id: "1002", quantity: 1, price: 199.0 }
])读取后要遍历渲染，不能直接 innerHTML 拼接字符串——否则事件监听器丢失，加减按钮点不动。
- 写入前用
JSON.stringify()，读取后必须JSON.parse() - 每次修改数量，先从
localStorage读出整个数组，更新对应id的quantity，再整体写回 - 注意浮点数精度：
(29.9 * 2).toFixed(2)比直接29.9 * 2更稳妥
总价计算总不准，parseFloat 和 parseInt 该用哪个？
用 parseFloat。价格是小数，parseInt("29.99") 会截断成 29，直接少钱。
但更要命的是：DOM 里取值是字符串，比如 input.value 是 "2"，不转就变成 "29.9" + "2" === "29.92"（字符串拼接）。
- 数量必须转数字：
const qty = parseFloat(input.value) || 1（|| 1防空值） - 单价建议在 DOM 上用
data-price="29.90"存原始值，不用从文本节点里 parse - 总价累计用
total += qty * parseFloat(item.dataset.price)，别用innerHTML里的文字
容易被忽略的一点：用户手动在数量框里输入 "2.5" 或 "-1"，min="1" 属性只是提示，实际仍可绕过——得在 JS 里校验并重置。
