如何在本地存储中存储和检索购物车项目? [英] How to store and retrieve Shopping Cart items in localstorage?

问题描述

我正在为一个电子商务网站创建购物车，并希望将产品存储在浏览器的本地存储中.

I'm creating a shopping cart for an e-commerce website and want to store the products in the browser localstorage.

我已经在代码中实现了以下功能，用于添加和检索产品

I've implemented the following functions into my code for adding and retrieving products

addToCart()是每次按下添加到购物车"按钮时启动的功能.
addProduct()将每个产品添加到cartList.
getProductsFromLocalStorage()从localStorage检索产品，并将产品添加到cartList.

addToCart() is the function that launches each time the Add to Cart button is pressed.
addProduct() adds each product to the cartList.
getProductsFromLocalStorage() retrieves the products from the localStorage and adds the products to the cartList.

  function addToCart(trigger) {
    var cartIsEmpty = cartWrapper.hasClass('empty');
    //get localstorage cart product list
    getProductsFromLocalStorage();
    //update cart product list
    addProduct();
    //update number of items
    updateCartCount(cartIsEmpty);
    //update total price
    updateCartTotal(trigger.data('price'), true);
    //show cart
    cartWrapper.removeClass('empty');
  }

  function addProduct() {

    productId = productId + 1;
    var productName = document.getElementById('reebok').innerHTML;
    var productPrice = document.getElementById('p_price').getAttribute('data- value');
    var image = document.getElementById("main_img").src;
    var productSize = document.getElementById('size').value;
    var productColor = document.getElementById('color').value;
    value = parseFloat(productPrice).toFixed(2);

    var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="'+ image +'" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + productName + '</a></h3><span class="price">'+ productPrice +'</span><div class="actions"><a href="#0" class="delete-item">Delete</a><a class="delete-item">'+ productSize +'</a><a class="delete-item">'+ productColor +'</a><div class="quantity"><label for="cd-product-' + productId + '">Qty</label><span class="select"><select id="cd-product-' + productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');

    cartList.append(productAdded);

    let products = [{'productId' : productId + 1, image : image, name : productName, price: productPrice, size: productSize, color: productColor}];

    localStorage.setItem('products', JSON.stringify(products));

  }

  function getProductsFromLocalStorage() {
    const cs = localStorage.getItem('products');
    if (cs === null) {
      addProduct();
    } else {
      $.each(cs.products, function(key, value) {
        cartList.prepend($('<li class="product"><div class="product-image"><a href="#0"><img src="'+ value.image +'" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + value.name + '</a></h3><span class="price">${value.price}</span><div class="actions"><a href="#0" class="delete-item">Delete</a><a class="delete-item">' + value.size + '</a><a class="delete-item">' + value.color + '</a><div class="quantity"><label for="cd-product-' + value.productId + '">Qty</label><span class="select"><select id="cd-product-' + value.productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>'));
      });
    }
  }

我现在遇到了一个问题，即无法从本地存储中检索购物车商品，并将其与新商品一起添加到购物车中.这意味着购物车中的商品已保存在存储区中，但是当我尝试添加新商品时，我看到一个空白的购物车，如下所示:

I've now got the issue of not being able to retrieve the cart items from the local storage and add them to the cart with new items. This means the shopping cart items are saved in storage but I see a blank cart when I attempt to add new items as below:

购物车截图

此代码的演示位于 https://codyhouse. co/demo/add-to-cart-interaction/index.html .

感谢您的帮助，

詹姆斯.

推荐答案

您应该为此使用浏览器的本地存储.

You should use browser's localstorage for it.

在功能addProduct中，应将产品数组添加到本地存储项中，例如products；像这样:

In your function addProduct, you should add array of products to a local storage item say products; like so:

function addProduct(){
    let products = [];
    if(localStorage.getItem('products')){
        products = JSON.parse(localStorage.getItem('products'));
    }
    products.push({'productId' : productId + 1, image : '<imageLink>'});
    localStorage.setItem('products', JSON.stringify(products));
}

如果要删除产品，可以这样操作:

If you want to remove product, you can do it like so:

function removeProduct(productId){

    // Your logic for your app.

    // strore products in local storage

    let storageProducts = JSON.parse(localStorage.getItem('products'));
    let products = storageProducts.filter(product => product.productId !== productId );
    localStorage.setItem('products', JSON.stringify(products));
}

请检查此小提琴以进行演示.

这篇关于如何在本地存储中存储和检索购物车项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！