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

Question

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

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

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);
            }
        }

Answer 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 中存储购物车项目并在 Spring 引导中使用 AJAX 显示该项目？

How to store cart items in localStorage and display that item using AJAX in Spring Boot?

ajax

jquery

jsp

spring-boot