如何在本地存储中追加购物车项目，Jquery

Question

我想使用购物车中的 localStorage 将产品添加到购物车中。 如何保存项目并将它们附加到购物车列表中。 如果购物车在主页中，我可以显示项目，但如果我想显示添加到其他页面或 cart.html（单独页面）的项目，我需要 localStorage。我不知道如何将这些动态列表项存储在 localStorage 中。

购物车.html

 <div id="cart">
      <div class="divider-header">
      <p class="cart-heading"><i class="fa fa-shopping-bag"><span class="badge shopping-bag-badge">0</span></i>Your Cart</p>
      <a href="#" class="closebtn closecart">
      <div><span id="first"></span><span id="second"></span></div></a>
      </div>
      <div id="empty-cart">
        <img src="images/empty-cart.png" alt="">
        <h3>Your Cart is Empty!</h3>
        <small>Looks like you haven't added anything to your cart yet</small>
        <a href="#">Continue Shopping</a>
      </div>

      <!--Cart List-->
        <ul id="cartList">
        </ul>
        <p id="shipping_text">Shipping Cost : $2</p>
        <p id="total_amount_text">Total Amount : <span></span></p>
        <a type="button" id="checkout">Check Out</a>
        <a type="button" id="clear-cart">Clear Cart</a>
   </div>

//首页的项目

 <div><img class="skincare-soapimg" src="images/skincaresoap4.png" alt=""></div>
              <p class="skincare-soapname">Skin Paradise</p>
              <p class="skincare-soapprice">$23</p>
              <a class="slider-btn addToCart" type="button" data-id="4" data-image="images/skincaresoap4.png" 
              data-price="$23" data-name="Skin Paradise" data-quantity="1" data-weight="150g" data-availability="In Stock">SHOP NOW</a>
            </div>

jQuery 代码 $(".addToCart").click(function(){

    // animate button
    var total = 0;
    var shipping = 2;
    var flag = 0;

    //check if cart is empty to remove empty cart view
           if( ($("#cartList").has("li").length === 0) ) { 
            $("#empty-cart").css("display","none");}
           
    //Get all data of item to be added
        var id= $(this).data("id");
        var price= $(this).data("price");
        var image = $(this).data('image');
        var name = $(this).data("name");
        var quantity = $(this).data("quantity");
        var availability = $(this).data("availability");
        var weight = $(this).data("weight");

    //Traverse the cart list to check if item already exists or not
        $( "#cartList li" ).each(function( index) {
            var matched = $( this ).find(".id").text();
             if (matched == id){
             var increment= $( this ).find(".quantity").val();
              increment++;
              flag = 1;
              $( this ).find(".quantity").val(increment);
                return false;
               }
           });

      //Add new Item in cart
          if(flag == 0){
            var cartItem= $("<li class='newItem'> <p class='id'>"+id+"</p><div class='picture'><img src='"+ image +"' ></div> <div class='details'><p class='name'>"+name+"</p><span class='weight'>"+weight+"</span><span> /</span> <span class='avail'>"+availability+"</span> <p class='price'>"+price+"</p><a type='button' class='inc'>+</a><input type='text' class='quantity' pattern='[0-9]+' value="+quantity+" ><a type='button' class='dec'>-</a></div> <a type='button' class='removeItem'><i class='fa fa-trash'></i></a></li>");

               //increment in badge icon number when new item added in cart
                 
                  var counterInc = parseInt($(".badge").html()) + 1;
                    $(".badge").html(counterInc);
             }

})

Answer 1

我在您的示例代码中没有看到对localStorage 的任何引用。把它放在一边。 window.localStorage是一个简单的key+value数据存储。阅读more about localStorage

解决localStorage 中数据存储的一种方法是将object 或array 序列化为JSON，并将生成的字符串存储为键的值。这是一个函数的伪代码，它接受一个对象并添加到 localStorage 中的一个数组中。

它首先从 localStorage 获取键 cart 的值，然后将值从字符串反序列化为数组。接下来，它将新项目推送到数组中。该过程相反，新更新的数组作为 JSON 序列化为字符串，并为键 cart 设置。我们利用JSON.parse 和JSON.stringify 方法来处理反序列化/序列化。

/**
  @param {object} cartItem - {name,price,id}
*/

function addToCart(cartItem) {
  const existing = localStorage.getItem('cart');
  const shoppingCart = [];
  if(existing) {
    try {
     shoppingCart.push(...JSON.parse(existing))
    } catch(err) { console.error('ERROR deserializing cart',err); }
  }
  shoppingCart.push(cartItem);
  localStorage.setItem('cart', JSON.stringify(shoppingCart));
}
/**
  @param {array} shoppingCart - collection (array of objects)
  [{name,price,id},{name,price,id}...]
*/
function replaceCart(shoppingCart) {
  localStorage.setItem('cart', JSON.stringify(shoppingCart));
}
// append item foo with price 1000 to existing cart
addToCart({name:'foo', price:1000, id:'abcFoo'})

也就是说，从您的代码//Traverse the cart list to check if item already exists or not 注释看来，您可以将项目添加到数组中，然后只需替换购物车中的整个值。我提供了一个名为replaceCart 的附加函数，它接受一个数组并覆盖所有现有值。您是追加还是替换的实施取决于此问题范围之外的各种其他因素。

可能值得注意：将localStorage 用于购物车有很多缺点。例如，由于localStorage 是本地服务器而不是远程服务器，因此当用户从移动设备移动到桌面设备时，他们的购物车在该设备本地。此外，Safari 网络浏览器会放置一个7 day cap on script-writeable storage。

localStorage 可以用作处理选项卡/视图之间的数据的一种方式。还有一个StorageEvent，只要对存储对象进行更改就会触发。这在跨多个选项卡使用 localStorage 时很有用。 Read more about using storage api.