html5 localstorage可实现轻量离线购物车：以json数组存储商品（含id、name、price、quantity），封装增删改查函数并实时持久化；页面加载时读取渲染，交互时同步ui与本地存储；注意其无跨设备同步、不加密、容量有限等局限性。
HTML5 本地存储（主要是 localStorage）可以实现简单、轻量的离线购物车功能，适用于用户未登录、不依赖后端的场景。它的核心思路是：把商品信息以 JSON 格式存入浏览器本地，页面加载时读取并渲染，增删改操作都只在 localStorage 中完成，等网络恢复后再同步到服务器（可选）。
1. 定义购物车数据结构
购物车通常是一个数组，每个商品对象至少包含 id、name、price、quantity 等字段。避免直接存 DOM 节点或函数，只存纯数据。
- 示例格式：[{ "id": "p1001", "name": "无线耳机", "price": 199, "quantity": 2 }]
- 用商品唯一标识（如 skuId 或 productId）作为 key 更可靠，避免重复添加同一商品
- 每次修改后都重新序列化整个数组，不要尝试局部更新字符串
2. 基础操作封装（增、删、改、查）
写几个实用函数，统一处理 JSON 解析/序列化和 localStorage 读写：
- addToCart(product)：先查是否已存在，存在则 quantity += 1，否则 push 新项，再保存
- updateQuantity(id, newQty)：遍历数组匹配 id，更新 quantity，移除 quantity ≤ 0 的项
- removeItem(id)：过滤掉对应 id 的商品
- getCart()：读取 localStorage，JSON.parse()，空值时返回 []
所有操作后都要调用 localStorage.setItem('cart', JSON.stringify(cartArray)) 持久化。
3. 页面加载与实时同步
页面初始化时立即读取 cart 并渲染列表（比如用 innerHTML 或模板字符串）。后续所有交互（点击“加入购物车”、修改数量、删除）都调用上述函数，并同步更新 UI。
- 监听 input[type="number"] 的 change 事件来更新数量，避免频繁触发
- 用事件委托处理动态生成的删除按钮，提升性能
- 可加一个“清空购物车”按钮，直接调用 localStorage.removeItem('cart')
4. 注意事项与局限性
localStorage 有容量限制（通常 5–10MB），但单个购物车远低于此；它不跨浏览器、不加密、不自动过期，且无法监听变化（需手动触发）。
- 敏感信息（如用户地址、支付方式）绝不能存在 localStorage
- 用户清除浏览器数据时购物车会丢失，适合临时缓存，不是最终订单存储
- 若需多设备同步或登录态关联，请搭配后端接口，在联网时上传 cart 数据并合并
- 可配合 service worker 实现更完整的离线体验（比如缓存商品页静态资源），但购物车逻辑仍由 localStorage 承担
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
