购物车数据通过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 建议用服务端返回的唯一标识，避免前端生成冲突；价格等敏感字段不依赖本地存储，下单时应以服务端为准