纯html无法动态渲染商品列表，必须用javascript；document.createelement+appendchild更可控，模板字符串+innerhtml更快但需防xss，正确做法是拼接后一次性写入或用documentfragment批量插入。
怎么让商品数据动态渲染到HTML页面上
不写 JavaScript 就没法把商品列表画出来，纯 HTML 只能写死内容。实际项目里，document.createElement 和 innerHTML 是最直接的两种方式，前者更可控，后者写起来快但容易被 XSS 注入（尤其当商品名含 <script></script> 时）。
常见错误是循环里反复赋值 innerHTML，比如：
items.forEach(item => {
container.innerHTML += <div>${item.name}</div>;
});
这会导致每次重绘整个容器，性能差，还可能清掉已绑定的事件。正确做法是拼接字符串后一次性写入，或用 DocumentFragment 批量插入。
- 优先用
document.createElement+appendChild，适合需要后续操作单个商品节点的场景（比如加减数量） - 如果只是展示，用模板字符串拼好再赋给
innerHTML，但记得用textContent替代用户输入内容，防注入 - 别在循环里调用
querySelector查找同一个元素多次，提前提取变量
怎么实现“加减数量”并实时更新总价
关键不是按钮本身，而是如何把点击事件和对应商品的数据关联起来。用 data- 属性是最轻量的做法，比如给“+”按钮加 data-id="1024"，再在事件处理器里查 items.find(i => i.id === +e.target.dataset.id)。
容易踩的坑是直接用 parseInt 解析数量输入框的值——如果用户手动删空了输入框，parseInt('') 返回 NaN，后续计算就崩了。得先校验是否为有效数字。
- 数量输入框必须设
type="number"，并加min="1"，避免负数和小数（除非业务允许） - 总价计算别只累加 DOM 里的文本内容，要从原始数据对象里取
price和quantity，防止界面和状态不一致 - 更新 DOM 时，只改变动的部分（比如单价、小计、总价），不要重新渲染整行，否则焦点会丢失
怎么保存购物车状态，关页再开还在
localStorage 是唯一可行的客户端持久化方案，sessionStorage 关闭标签页就丢，cookies 太小还随请求发出去，都不合适。
典型错误是直接存数组：localStorage.setItem('cart', cartItems) —— 这会调用 toString()，结果变成 "[object Object],[object Object]"。必须用 JSON.stringify 序列化，读取时用 JSON.parse，且要包 try-catch，因为用户可能手动删过 localStorage 导致解析失败。
- 每次修改购物车（增删改）后立刻同步到 localStorage，别等页面卸载时才存
- 存之前检查
cartItems是否为数组，避免存null或undefined - 如果商品有动态字段（比如库存变化），localStorage 里的旧数据不会自动更新，得设计版本号或定期校验机制
为什么“删除商品”按钮点了没反应
绝大多数情况是事件委托没设对，或者删除逻辑里没同步更新数据源。比如你用 querySelectorAll('.delete-btn') 绑事件，但新添加的商品按钮不在初始集合里，自然没监听。
另一个高频问题是用了 e.target 却没考虑冒泡路径：用户点的是按钮里的图标，e.target 是 <i></i> 标签，不是按钮本身，导致 dataset 取不到。
- 用事件委托：给容器绑
click，再用e.target.closest('.delete-btn')安全获取按钮 - 删除前确认是否真要删（
confirm或更友好的 toast 提示），别让用户手滑就丢数据 - 删完不仅要从 DOM 移除节点，还得从
cartItems数组里splice或filter掉对应项，再存回 localStorage
本地存储和 DOM 同步这事看着简单，但只要漏掉一环，用户就会觉得“刚加的东西不见了”。动手前先想清楚：数据在哪改、视图哪刷新、持久化哪触发——三者必须严格对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
