Question

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

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

addToCart（）是每次按下“添加到购物车”按钮时启动的功能。
addProduct（）将每个产品添加到cartList。
getProductsFromLocalStorage（）从localStorage检索产品并将产品添加到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>'));
      });
    }
  }

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

Screenshot of Shopping Cart

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

感谢您的帮助，

詹姆斯。

Answer 1

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

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

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

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

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

请检查此fiddle以获取有效的演示。

Answer 2

使用此javascript程序包将任何类型的数据存储在浏览器的indexDB中，以使数据在重新加载后仍然存在。 localforage

如何在本地存储中存储和检索购物车项目？

2 个答案: