使用 Zustand 管理购物车全局状态并配合 persist 插件自动同步至 localStorage，实现页面刷新不丢失；或用 Context + useEffect 手动序列化/反序列化，注意异常处理、商品去重合并、精简数据结构及跨标签页 storage 事件监听。
用全局状态管理购物车并实现本地暂存，核心是把购物车数据存在内存（如 React 的 Context 或 Zustand）+ 同时同步到 localStorage。这样页面刷新不丢数据，也不依赖后端接口。
用 Zustand 管理全局购物车状态
Zustand 轻量、易用、自带持久化插件，适合纯前端暂存场景。安装后创建一个 store：
- 定义 cart 数组、addItem、removeItem、updateQuantity 等操作
- 使用 persist 插件自动将 state 写入 localStorage（key 可自定义，比如
"cart-store"） - 插件默认在初始化时从 localStorage 读取，页面加载即恢复上次购物车
手动同步 localStorage（兼容旧项目或精简需求）
若不用第三方库，可用 Context + useEffect 实现：
- 在购物车 Provider 内部，每次 cart 更新后调用
localStorage.setItem("cart", JSON.stringify(cart)) - 组件挂载时用
JSON.parse(localStorage.getItem("cart") || "[]")初始化 state - 注意处理解析异常（如 localStorage 被手动清空或格式损坏），加 try-catch 保底返回空数组
商品去重与数量合并逻辑要写清楚
用户多次添加同一商品时，应合并而非重复插入：
- 判断是否已存在：用商品 id（或 skuId）作为唯一标识
- 存在则更新 quantity；不存在则 push 新项
- 删除时用 filter，清空用置空数组，同时触发 localStorage 同步
注意 localStorage 容量和数据结构合理性
单个域名下 localStorage 通常 5–10MB，但购物车数据应尽量精简：
- 只存必要字段：id、name、price、quantity、thumbnail（URL 可缩略）
- 避免存冗余信息（如完整商品描述、HTML 片段）
- 定期清理过期项（例如超过 7 天未操作的购物车可设为可选自动清空）
不复杂但容易忽略：localStorage 是字符串存储，对象必须 JSON 序列化；跨标签页修改不会自动触发更新，需监听 storage 事件做响应式同步（如用 window.addEventListener('storage', ...)）。
