如何将购物车项目存储在 localStorage 中并在 Spring Boot 中使用 AJAX 显示该项目？

Posted 2023-05-08

【中文标题】如何将购物车项目存储在 localStorage 中并在 Spring Boot 中使用 AJAX 显示该项目？

【英文标题】：How to store cart items in localStorage and display that item using AJAX in Spring Boot?

【发布时间】：2021-09-28 16:50:42

【问题描述】：

我正在开发一个在线购物 Spring Boot Web 应用程序。我有一个加入购物车功能。所以，我只是尝试使用 localStorage 来实现它。但是有一些存储限制，不能添加超过 3 或 5 MB 的项目。下面是我的脚本将物品添加到购物车。我想为来宾用户和注册用户实现添加到购物车功能。我的意思是，当访客用户访问我的网络应用程序并想要将一些商品添加到他/她的购物车时，当尝试购买或结账时，成功登录后，他/她将能够查看他/她的购物车商品此前添加。所以我想在这两种情况下都添加这个功能。但是经过这么多的研究工作，我没有找到更好更简单的方法来做到这一点。我应该选择 localStorage 还是 HttpSession。通过选择任何一种机制，如何做这件事。 请帮帮我。我在这部分卡了几个星期。我需要调用 AJAX 函数来添加到购物车按钮吗？

在下面的代码中，当购物车中没有商品时，block 会按预期执行。但是，如果我的购物车中已经有一些物品，那么我应该怎么做呢？

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)  
            /* No item in cart. Cart is not created yet */
            var products = [];
            var product = productid : pid ,productname : pname ,pprice : pprice ,quantity : quantity;
            products.push(product);
            localStorage.setItem("cart", JSON.stringify(products));
            console.log(JSON.stringify(products));
            console.log("Product is added for the first time");
            
        else 
            // item in cart is already present
            var pcart = [JSON.stringify(cart)];
            var oldproduct = pcart.find(item => item.productid == pid);
            var product = productid : pid, productname : pname, pprice : pprice, quantity : quantity;
            pcart.push(product);
            localStorage.setItem("cart", JSON.stringify(pcart));
            console.log("Product is added again");
        
           updatecart();
    

以下脚本用于更新购物车中商品的数量。

function updatecart()
            var cartstring = localStorage.getItem("cart");
            console.log(JSON.parse(cartstring));
            var cart = JSON.parse(cartstring);
            console.log(cart.pprice);
            var cartlength = cart.length;
            if(cart == null || cart.length == 0)
                console.log("Cart is empty!!!!");
                $(".add_cart_wrap").html('0');
            else
                // there is some item in the cart
                console.log(cart);
                $(".add_cart_wrap").html(cartlength);
            
        

【问题讨论】：

嗨，你在其他情况下遇到问题了吗？

@Swati 是的，当产品已经存在于购物篮或购物车中时，我就会遇到问题。因为它应该更新购物车。但未能这样做。 span>

【参考方案1】：

您可以检查 pid 是否已经存在于 localStorage 中。然后，如果不存在，您可以获取整个 json 对象，然后更新数量值并将这个新的更新值保存在 localStorage 中。

更新代码：

function addtocart(pid, pname) 
  var quantity = $("#quantity").val() != "" ? parseInt($("#quantity").val()) : 0;
  var price = $("#pprice").text();
  var pprice = price.replace(/[^\x00-\x7F]/g, "");
  var cart = localStorage.getItem("cart");
  var pcart = JSON.parse(cart) != null ? JSON.parse(cart) : [];
  //get index of the json array where the productid is there ...
  var present_or_not = pcart.findIndex(item => item.productid == pid);
  //if the item not presnt , is null
  if (cart == null || present_or_not == null || present_or_not == -1) 
    var product = 
      productid: pid,
      productname: pname,
      pprice: pprice,
      quantity: quantity
    ;
    pcart.push(product);
    localStorage.setItem("cart", JSON.stringify(pcart));

   else 
    //get the the json from index...
    var actual_stored_product = pcart[present_or_not];
    pcart.splice(present_or_not, 1); //remove the json array 
    //get the qty which was already prsnt
    var actual_qty = actual_stored_product.quantity == null || actual_stored_product.quantity == "" ? 0 : actual_stored_product.quantity;
    //update the value
    actual_stored_product.quantity = parseInt(actual_qty) + quantity;
    //now..we have updated value..push obj again..
    pcart.push(actual_stored_product);
    //store the json in local Storage
    localStorage.setItem("cart", JSON.stringify(pcart));
  
  console.log(JSON.stringify(pcart));
   updatecart();

【讨论】：

您认为 localStorage 是将访客用户购物车物品存储在购物篮中的好方法吗？有没有其他选择。就像，没有登录的用户可以在购物车中添加商品，当他/她登录时，之前添加的商品也将可见。

我得到了上面的 JSON 数据。 [ "productid":"15", "productname":"情侣海报蛋糕", "pprice":"1614", "quantity":2 , "productid":"14", "productname":"巧克力松露蛋糕”，“pprice”：“664”，“数量”：2，“productid”：“14”，“productname”：“巧克力松露蛋糕”，“pprice”：“1328”，“数量”： 4 ]

嗨，它不适合你吗？你检查过present_or_not 有什么吗？

我想问一下 localStorage 是否适用于访客用户登录并且能够看到他在访问我们的应用程序时添加的购物车中的商品并在购物车中添加了一些商品？跨度>

这取决于您，或者您可以在 localStorage 中为特定用户存储一些随机的唯一 ID，然后无论该用户选择什么（产品），您都可以使用该唯一 ID 将这些产品存储在您的数据库中，因此，无论何时该用户再次访问您的网站，您可以检查 localStorage 中是否有 unique_id，这取决于您可以从数据库中获取数据并显示在前端。