时间戳

首页 > 解决方案 > 如何在本地存储中追加购物车项目，Jquery

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

问题描述

我想使用购物车中的 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);
             }

})

标签： javascripthtmljquerylocal-storageshopping-cart

解决方案

localStorage我在您的示例代码中没有看到任何引用。把它放在一边。window.localStorage是一个简单的key+value数据存储。阅读有关本地存储的更多信息

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

它首先从localStorage键中获取值，cart然后将值从字符串反序列化为数组。接下来，它将新项目推送到数组中。该过程相反，新更新的数组作为 JSON 序列化为字符串并设置为 key 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 天的上限。

localStorage作为处理选项卡/视图之间数据的一种方式，它很有用。每当对存储对象进行更改时，也会StorageEvent触发一个。localStorage这在跨多个选项卡工作时很有用。阅读有关使用存储 api的更多信息。

推荐阅读