购物车数据通过localStorage本地持久化，需JSON序列化数组、封装统一增删改查逻辑、监听storage事件实现跨标签页同步，并处理容量限制与隐私模式降级。
购物车数据在浏览器端本地持久化，核心是用 localStorage 保存结构化数据，并在页面加载、添加/删除商品、数量变更等关键时机同步更新和读取。
用 JSON 序列化保存购物车数组
localStorage 只支持字符串，购物车通常为对象数组（如 [{id: "p1", name: "手机", price: 2999, count: 2}, ...]），需用 JSON.stringify() 存储，用 JSON.parse() 读取。注意捕获解析异常，避免因存储损坏导致脚本中断：
- 初始化时先尝试读取，失败则设为空数组：
let cart = JSON.parse(localStorage.getItem('cart')) || []; - 每次修改后立即保存：
localStorage.setItem('cart', JSON.stringify(cart)); - 避免直接存 null 或 undefined，防止后续 parse 报错
统一管理购物车操作，避免状态不一致
不要在多个地方分别读写 localStorage，应封装增删改查方法，所有变更都经由同一套逻辑处理：
- 添加商品：检查是否已存在，存在则累加数量，否则 push 新项，再保存
- 更新数量：通过 id 查找并修改 count，count ≤ 0 时自动移除
-
清空购物车：直接设为
[]并保存，不要只删 key - 所有操作后触发自定义事件（如
cart-updated），通知 UI 重新渲染
跨标签页或窗口同步购物车数据
localStorage 本身不触发页面重绘，但会触发 storage 事件——当同源下其他标签页修改了 localStorage，当前页可监听该事件并刷新购物车：
立即学习“前端免费学习笔记（深入）”；
- 在页面初始化后绑定：
window.addEventListener('storage', e => { if (e.key === 'cart') loadCart(); }); - 注意：该事件不会在触发修改的当前页执行，只通知其他同源页面
- 配合事件机制，可实现多窗口实时同步，无需轮询或后端介入
兼容性与边界情况处理
localStorage 容量约 5–10MB（因浏览器而异），但单次写入过大可能卡顿；还需考虑用户禁用或隐私模式：
- 写入前检查容量，可用
try...catch捕获QuotaExceededError - 隐私模式下 localStorage 可能被禁用，应提供降级方案（如仅内存暂存 + 提示“关闭无痕模式以保存购物车”）
- 商品 id 建议用服务端返回的唯一标识，避免前端生成冲突；价格等敏感字段不依赖本地存储，下单时应以服务端为准
