title: Save and load shopping cart with LocalStorage
body: <p>I have the following code:</p>
  
  <pre><code>inames = [];
  iqtyp = [];
  iprice = [];
  
  function bestel() {
    inames.push(document.getElementById('artikel').innerHTML);
    iqtyp.push(parseInt(document.getElementById('hoeveel').value));
    iprice.push(parseInt(document.getElementById('prijs').innerHTML));
    displayCart();
  }
  
  function displayCart() {
    cartdata = '&lt;table&gt;&lt;tr&gt;&lt;th&gt;Product Name&lt;/th&gt;&lt;th&gt;Quantity&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;th&gt;Total&lt;/th&gt;&lt;/tr&gt;';
    total = 0;
    for (i = 0; i &lt; inames.length; i++) {
      total += iqtyp[i] * iprice[i];
      cartdata += "&lt;tr&gt;&lt;td&gt;" + inames[i] + "&lt;/td&gt;&lt;td&gt;" + iqtyp[i] + "&lt;/td&gt;&lt;td&gt;" + iprice[i] + "&lt;/td&gt;&lt;td&gt;" + iqtyp[i] * iprice[i] + "&lt;/td&gt;&lt;td&gt;&lt;button onclick='delElement(" + i + ")'&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
    }
    cartdata += '&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;' + total + '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
    document.getElementById('cart').innerHTML = cartdata;
  }
  
  function save() {
    localStorage.setItem("car", cartdata);
  }
  
  function load() {
    document.getElementById("cart").innerHTML += localStorage.getItem("car");
  }
  </code></pre>
  
  <p>I want the user to be able to save the cart and load it again when he refresh the page. How can I do this?</p>
  
  <p>Now, I added the function save and load but now it doesn't add the items to the table, it just copies the whole table.</p>