localstorage适合持久化保存购物车数据,需用json.stringify()存入、json.parse()读取并判空,增删改后须立即同步,注意容量限制、数据类型约束及同源限制。

LocalStorage 可以把购物车商品列表以字符串形式保存在浏览器中,关掉页面再打开依然存在,适合记录用户未结算的商品。
把商品数据存进 LocalStorage
购物车通常是一个数组,比如:
[{"id":1,"name":"iPhone","price":5999,"count":2},{"id":2,"name":"AirPods","price":1299,"count":1}]
直接用 JSON.stringify() 转成字符串,再用 localStorage.setItem() 存进去:
const cart = [{id:1,name:"iPhone",price:5999,count:2},{id:2,name:"AirPods",price:1299,count:1}];
localStorage.setItem('cart', JSON.stringify(cart));
从 LocalStorage 读取购物车
页面加载时,调用 localStorage.getItem() 获取字符串,再用 JSON.parse() 还原成数组:
const cartData = localStorage.getItem('cart');
const cart = cartData ? JSON.parse(cartData) : [];
注意加空值判断——如果没存过,getItem 返回 null,JSON.parse(null) 会报错。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
增删改商品后同步更新 LocalStorage
每次操作购物车(添加、修改数量、删除),都得立刻更新 LocalStorage,否则下次打开就不是最新状态:
- 添加商品:push 到 cart 数组,再 setItem
- 更新数量:遍历找到对应 id,修改 count,再 setItem
- 删除商品:filter 掉目标项,再 setItem
推荐封装一个函数统一处理写入,避免重复代码:
function saveCart(cart) {
localStorage.setItem('cart', JSON.stringify(cart));
}
注意兼容性和边界情况
LocalStorage 有容量限制(通常 5MB 左右),单个商品字段别存太多冗余信息(比如完整 HTML 或 base64 图片);另外它只支持字符串,不能直接存 Date、Function、undefined 或循环引用对象。购物车数据保持扁平结构最稳妥。
不复杂但容易忽略:不同域名或协议(http/https)之间 LocalStorage 不共享,用户换设备或清缓存后数据就没了——它只是“本地持久化”,不是“跨端持久化”。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










