localstorage适合持久化轻量级购物车数据，需序列化存储、安全解析，并在增删改查后立即调用savecart同步更新；注意仅存可序列化字段、避免敏感信息、处理解析异常及跨域隔离。
LocalStorage 可以直接保存购物车数据到浏览器本地，关机重启后依然存在，适合做轻量级离线缓存。关键在于把商品信息序列化存储、读取时反序列化，并处理增删改查逻辑。
初始化购物车：从 LocalStorage 加载已有数据
页面加载时先尝试读取 localStorage 中的 cart 数据，如果不存在或解析失败，就初始化为空数组：
function loadCart() {
try {
const saved = localStorage.getItem('cart');
return saved ? JSON.parse(saved) : [];
} catch (e) {
console.warn('读取购物车失败，使用空数组', e);
return [];
}
}
const cart = loadCart(); // cart 是一个商品对象数组
添加商品：去重合并数量，再存回 LocalStorage
添加商品时不要简单 push，要检查是否已存在（通常用 id 或 skuId 判断），存在则累加数量，否则新增。更新后立即写入 localStorage：
- 用商品唯一标识（如 id 或 skuId）查找是否已存在
- 已存在就更新 quantity 字段，否则 push 新对象
- 调用 saveCart(cart) 持久化，避免后续操作读到旧数据
function addToCart(item) {
const existing = cart.find(g => g.id === item.id);
if (existing) {
existing.quantity += item.quantity || 1;
} else {
cart.push({ ...item, quantity: item.quantity || 1 });
}
saveCart(cart);
}
function saveCart(list) {
localStorage.setItem('cart', JSON.stringify(list));
}
更新与删除：操作数组后务必同步写入
修改数量、删除某一项、清空购物车，都要在内存中操作 cart 数组，然后调用 saveCart：
- 更新数量：cart.find(...).quantity = newQty
- 删除单个：cart = cart.filter(g => g.id !== targetId)
- 清空购物车：cart = []，再 saveCart([])
注意：不要只改 DOM 或状态变量，忘记调用 saveCart，否则刷新后恢复原样。
注意事项和边界情况
LocalStorage 容量约 5–10MB，但单条字符串不能超限；它只支持字符串，所以必须用 JSON；不同域名/协议间数据不共享：
- 避免存函数、undefined、Date 对象等无法 JSON 序列化的值
- 敏感信息（如用户手机号、地址）不要存在 localStorage
- 商品对象字段尽量精简，比如只存 id、name、price、quantity、imgUrl
- 上线前建议加版本号字段，方便未来升级时迁移旧数据
不复杂但容易忽略细节，核心就是“操作数组 → 立即存字符串 → 读取时安全解析”。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
