购物车应使用 localStorage 而非 sessionStorage，因其支持关闭浏览器后数据持久保留、跨标签页共享；数据结构为商品对象数组，含 id、name、price、num 字段；操作遵循“读→改→存”闭环，初始化需容错处理，页面加载及每次变更后须同步渲染 DOM。
用 Web Storage 管理购物车，核心是选对存储方式、设计合理数据结构、保证操作同步。localStorage 适合长期保留未登录用户的购物车；sessionStorage 更适合临时会话型操作（如表单草稿、多步流程缓存），但电商购物车一般不用它——因为用户刷新页面后仍需保留商品。
选 localStorage 还是 sessionStorage？
未登录用户购物车必须用 localStorage：关闭浏览器再打开，商品还在；换标签页也能共享；数据结构统一存为数组，每项是商品对象，含 id、name、price、num 等字段。
sessionStorage 不适用购物车主场景：关掉当前标签页，整个购物车就清空了，不符合用户预期。它更适合密码临时缓存、多步骤表单中间状态等短生命周期需求。
数据结构与初始化逻辑
购物车初始值应为空数组，首次读取时做容错处理：
- 用
localStorage.getItem('cart')获取字符串 - 若返回 null，说明没存过，直接设为
[] - 若返回字符串，用
JSON.parse()转成数组；解析失败则重置为空数组 - 每次增删改后，都用
JSON.stringify()转回字符串再存入
关键操作的实现要点
所有操作都要“读 → 改 → 存”三步闭环：
- 添加商品：先查 cart 数组中是否已有相同 id 的商品；有则 num+1，无则 push 新对象（带 num:1）
- 修改数量：找到对应 id 的项，更新 num；num ≤ 0 时直接 filter 删除该项
- 删除商品：用 filter 返回不包含目标 id 的新数组
-
清空购物车：直接
localStorage.removeItem('cart')，比存空数组更干净
页面加载与实时同步
页面一打开就要渲染购物车内容，所以 DOMContentLoaded 或 onload 里必须调用一次读取 + 渲染函数。后续所有操作（加减、删除）完成后，立即重新读取并刷新 DOM，避免视图与本地数据不一致。
不需要监听 storage 事件——因为所有变更都发生在当前页面，其他标签页的改动才需要监听，而普通购物车极少跨标签页操作。
