Spring Boot购物车实现：localStorage存储+AJAX展示 兼容游客与注册用户

一、现有JS代码修复 #

错误原因 #

你现有代码的问题集中在addtocart方法的非空分支：

1. 从localStorage取出的cart本身就是JSON字符串，你错误地对其再次执行JSON.stringify后塞进数组，导致pcart中存储的是字符串而非商品对象，find方法完全无法匹配到对应商品
2. 没有处理同商品重复添加的逻辑，直接push会导致同一个商品生成多条重复记录
3. updatecart中console.log(cart.pprice)是无效代码，cart是商品数组，没有pprice属性

修复后代码 #

addtocart方法

function addtocart(pid,pname){
    var quantity = $("#quantity").val();
    var price = $("#pprice").text();
    var pprice = price.replace(/[^\x00-\x7F]/g, "");
    var cart = localStorage.getItem("cart");
    if(cart == null) { 
        // 购物车为空，初始化
        var products = [];
        var product = {productid : pid ,productname : pname ,pprice : pprice ,quantity : quantity};
        products.push(product);
        localStorage.setItem("cart", JSON.stringify(products));
        console.log("Product is added for the first time");
    }else {
        // 购物车已有商品，先解析为对象数组
        var pcart = JSON.parse(cart);
        var oldproduct = pcart.find(item => item.productid == pid);
        if(oldproduct) {
            // 已存在同款商品，叠加数量
            oldproduct.quantity = parseInt(oldproduct.quantity) + parseInt(quantity);
        } else {
            // 不存在同款，新增商品
            var product = {productid : pid, productname : pname, pprice : pprice, quantity : quantity};
            pcart.push(product);
        }
        localStorage.setItem("cart", JSON.stringify(pcart));
        console.log("Product added");
    }
    updatecart();
}

updatecart方法

function updatecart(){
    var cartstring = localStorage.getItem("cart");
    if(cartstring == null) {
        $(".add_cart_wrap").html('0');
        console.log("Cart is empty!!!!");
        return;
    }
    var cart = JSON.parse(cartstring);
    var totalCount = 0;
    // 如果要展示商品总数量而不是商品种类数，就遍历累加数量
    cart.forEach(item => totalCount += parseInt(item.quantity));
    // 如果要展示商品种类数直接用cart.length即可
    $(".add_cart_wrap").html(totalCount);
}

二、游客+注册用户购物车互通方案 #

不建议使用HttpSession实现，默认内存Session在分布式部署下会有一致性问题，且Session过期后游客购物车数据直接丢失，体验很差。推荐采用前后端双存储+登录合并的方案：

• 游客状态：后端给首次访问的用户分配一个唯一的匿名标识，存在有效期为30天的Cookie中。前端操作购物车时同时更新localStorage和后端匿名购物车接口，既保证前端读取速度，又解决localStorage容量限制、清缓存丢数据的问题。
• 登录合并：用户登录成功时，后端自动将当前Cookie对应的匿名购物车数据，合并到该用户的账号购物车表中，合并规则为同款商品叠加数量，合并完成后删除匿名购物车数据。前端同步清空localStorage的购物车，后续所有购物车操作直接调用登录用户的专属接口即可。

三、加入购物车是否需要调用AJAX接口 #

需要，必须调用后端接口，原因如下：

• 实时校验商品状态：可以在加购时判断商品是否下架、库存是否足够，避免到结账环节才报错的差体验
• 数据持久化：即使用户清空浏览器缓存、更换设备，只要登录账号就能查到购物车数据
• 多端同步：支持APP、小程序、PC端多端购物车数据一致

内容的提问来源于stack exchange，提问作者Rakhi Sharma