title: How to store items in local storage then recall it?
body: <p>I'd like to make it store the items in local storage so they can show up on a separate checkout page. Here is my code:</p>
  <pre class="lang-js prettyprint-override"><code>if (document.readyState == 'loading') {
      document.addEventListener('DOMContentLoaded', ready)
  } else {
      ready()
  }
  
  function ready() {
      var removeCartItemButtons = document.getElementsByClassName('btn-danger')
      for (var i = 0; i &lt; removeCartItemButtons.length; i++) {
          var button = removeCartItemButtons[i]
          button.addEventListener('click', removeCartItem)
      }
  
      var quantityInputs = document.getElementsByClassName('cart-quantity-input')
      for (var i = 0; i &lt; quantityInputs.length; i++) {
          var input = quantityInputs[i]
          input.addEventListener('change', quantityChanged)
      }
  
      var addToCartButtons = document.getElementsByClassName('shop-item-button')
      for (var i = 0; i &lt; addToCartButtons.length; i++) {
          var button = addToCartButtons[i]
          button.addEventListener('click', addToCartClicked)
      }
  
  }
  
  function removeCartItem(event) {
      var buttonClicked = event.target
      buttonClicked.parentElement.parentElement.remove()
      updateCartTotal()
  }
  
  function quantityChanged(event) {
      var input = event.target
      if (isNaN(input.value) || input.value &lt;= 0) {
          input.value = 1
      }
      updateCartTotal()
  }
  
  function addToCartClicked(event) {
      var button = event.target
      var shopItem = button.parentElement.parentElement
      var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
      var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
      var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
      addItemToCart(title, price, imageSrc)
      updateCartTotal()
  }
  
  function addItemToCart(title, price, imageSrc) {
      var cartRow = document.createElement('div')
      cartRow.classList.add('cart-row')
      var cartItems = document.getElementsByClassName('cart-items')[0]
      var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
      for (var i = 0; i &lt; cartItemNames.length; i++) {
          if (cartItemNames[i].innerText == title) {
              alert('Ez a termék már a kosárban van!')
              return
          }
      }
      var cartRowContents = `
          &lt;div class=&quot;cart-item cart-column&quot;&gt;
              &lt;img class=&quot;cart-item-image&quot; src=&quot;${imageSrc}&quot; width=&quot;100&quot; height=&quot;100&quot;&gt;
              &lt;span class=&quot;cart-item-title&quot;&gt;${title}&lt;/span&gt;
          &lt;/div&gt;
          &lt;span class=&quot;cart-price cart-column&quot;&gt;${price}&lt;/span&gt;
          &lt;div class=&quot;cart-quantity cart-column&quot;&gt;
              &lt;input class=&quot;cart-quantity-input&quot; type=&quot;number&quot; value=&quot;1&quot;&gt;
              &lt;button class=&quot;btn btn-danger&quot; type=&quot;button&quot;&gt;Eltávolítás&lt;/button&gt;
          &lt;/div&gt;`
      cartRow.innerHTML = cartRowContents
      cartItems.append(cartRow)
      cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
      cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
  }
  
  function updateCartTotal() {
      var cartItemContainer = document.getElementsByClassName('cart-items')[0]
      var cartRows = cartItemContainer.getElementsByClassName('cart-row')
      var total = 0
      for (var i = 0; i &lt; cartRows.length; i++) {
          var cartRow = cartRows[i]
          var priceElement = cartRow.getElementsByClassName('cart-price')[0]
          var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
          var price = parseFloat(priceElement.innerText.replace('$', ''))
          var quantity = quantityElement.value
          total = total + (price * quantity)
      }
      total = Math.round(total * 100) / 100
      document.getElementsByClassName('cart-total-price')[0].innerText = total + ' Ft'
  }
  </code></pre>
  <p>How would I go about doing that?<br />
  I'm just starting to learn to learn JS so, I don't really know what i'm doing. Is there a way to store something, to recall it later?</p>
  <p>This is for a school webshop project.</p>