title: LocalStorage array
body: <p>Guys help me with this code. The idea is to save new inputs in a string and display them using HTML. Every time I add a new one the HTML displays it, if I reload the page the items are still displayed and the first <code>getItem</code> method and if I reload again is still working but here is the problem. After I reload the page and I insert a new element in string then it will display the just the lates inputs and will delete the ones from other sessions.</p>
  
  <p>If I insert now :"one","two","three" it I will display "one,two,three" if I reload it will still display " one,two,three" which is good, but after the reload if I insert "four" it will display only "four" and I want to be displayed "one,two,three,four".</p>
  
  <p>How can I make this happen?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
      &lt;button onclick="reloadd()"&gt;Reload&lt;/button&gt;
      &lt;button onclick="clearF()"&gt;Clear&lt;/button&gt;
      &lt;input id="valoare"&gt;
      &lt;button id="adauga" onclick="adauga()"&gt;+&lt;/button&gt;
      &lt;button onclick="nrElemente()"&gt;ElemNr?&lt;/button&gt;
      &lt;script&gt;
        var cars = [];
        var two = "kes";
  
        document.getElementById("result").innerHTML = localStorage.getItem("array1");
  
        function clearF() {
          window.localStorage.clear();
          location.reload();
        }
  
        function adauga() {
          var x = document.getElementById('valoare').value;
          cars.push(x);
  
          localStorage.setItem("array1", cars);
          document.getElementById("result").innerHTML = localStorage.getItem("array1");
        }
  
        function reloadd() {
          location.reload();
        }
  
        function nrElemente() {
          alert(localStorage.length);
        }
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>