title: How to store and retrieve Shopping Cart items in localstorage?
body: <p>I'm creating a shopping cart for an e-commerce website and want to store the products in the browser localstorage.</p>
  
  <p>I've implemented the following functions into my code for adding and retrieving products</p>
  
  <p>addToCart() is the function that launches each time the Add to Cart button is pressed.<br>
  addProduct() adds each product to the cartList.<br>
  getProductsFromLocalStorage() retrieves the products from the localStorage and adds the products to the cartList.</p>
  
  <pre><code>  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 = $('&lt;li class="product"&gt;&lt;div class="product-image"&gt;&lt;a href="#0"&gt;&lt;img src="'+ image +'" alt="placeholder"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="product-details"&gt;&lt;h3&gt;&lt;a href="#0"&gt;' + productName + '&lt;/a&gt;&lt;/h3&gt;&lt;span class="price"&gt;'+ productPrice +'&lt;/span&gt;&lt;div class="actions"&gt;&lt;a href="#0" class="delete-item"&gt;Delete&lt;/a&gt;&lt;a class="delete-item"&gt;'+ productSize +'&lt;/a&gt;&lt;a class="delete-item"&gt;'+ productColor +'&lt;/a&gt;&lt;div class="quantity"&gt;&lt;label for="cd-product-' + productId + '"&gt;Qty&lt;/label&gt;&lt;span class="select"&gt;&lt;select id="cd-product-' + productId + '" name="quantity"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;option value="6"&gt;6&lt;/option&gt;&lt;option value="7"&gt;7&lt;/option&gt;&lt;option value="8"&gt;8&lt;/option&gt;&lt;option value="9"&gt;9&lt;/option&gt;&lt;/select&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;');
  
      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($('&lt;li class="product"&gt;&lt;div class="product-image"&gt;&lt;a href="#0"&gt;&lt;img src="'+ value.image +'" alt="placeholder"&gt;&lt;/a&gt;&lt;/div&gt;&lt;div class="product-details"&gt;&lt;h3&gt;&lt;a href="#0"&gt;' + value.name + '&lt;/a&gt;&lt;/h3&gt;&lt;span class="price"&gt;${value.price}&lt;/span&gt;&lt;div class="actions"&gt;&lt;a href="#0" class="delete-item"&gt;Delete&lt;/a&gt;&lt;a class="delete-item"&gt;' + value.size + '&lt;/a&gt;&lt;a class="delete-item"&gt;' + value.color + '&lt;/a&gt;&lt;div class="quantity"&gt;&lt;label for="cd-product-' + value.productId + '"&gt;Qty&lt;/label&gt;&lt;span class="select"&gt;&lt;select id="cd-product-' + value.productId + '" name="quantity"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;option value="6"&gt;6&lt;/option&gt;&lt;option value="7"&gt;7&lt;/option&gt;&lt;option value="8"&gt;8&lt;/option&gt;&lt;option value="9"&gt;9&lt;/option&gt;&lt;/select&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;'));
        });
      }
    }
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/NTsYv.png" rel="noreferrer">Screenshot of Shopping Cart</a></p>
  
  <p>The demo of this code is at <a href="https://codyhouse.co/demo/add-to-cart-interaction/index.html" rel="noreferrer">https://codyhouse.co/demo/add-to-cart-interaction/index.html</a>.</p>
  
  <p>Thanks for any assistance,</p>
  
  <p>James.</p>