title: .map() returns only the last object in an array
body: <p>I am trying to use the browser's <code>localStorage</code> to store an <code>array</code> of objects. Each object have two <code>keys:</code> <code>name</code> and <code>quote</code>. Those values come from a <code>form</code> element.
  When I reload the <code>browser</code>, I want to <code>map</code> through the array and display all the existing entries and when I add another one from the form element, to display that one as well.</p>
  
  <p>I am using <code>JSON.parse</code> and <code>JSON.stringify</code> to convert the data to <code>string</code> and back again to an <code>array</code>.
  I am using <code>document.createElement</code> and append it to the parent and <code>map</code> each object values in the <code>array</code> to the specific element.</p>
  
  <p>When i <code>console.log</code> the array from <code>localStorage</code> after <code>JSON.parse</code> it looks like this: </p>
  
  <pre><code>[
  {name: "sda", quote: "asd"}
  {name: "fff", quote: "dsa"}
  {name: "", quote: ""}
  {name: "ferfe", quote: "fre"}
  {name: "yhtyh", quote: "grtg"}
  {name: "fdf", quote: "ds"}
  {name: "fdf", quote: "ds"}
  ]
  </code></pre>
  
  <p>When I reload the browser and <code>map</code> the <code>array</code>, it returns only the last element from it and I dont't know why.</p>
  
  <pre><code>const process = () =&gt; {
      const getList = JSON.parse(localStorage.getItem('key_name')).map(item =&gt; JSON.parse(item));
      console.log(getList)
      const cite = document.createElement('cite');
      const p = document.createElement('p');
  
      document.getElementById('quote_list').appendChild(cite);
      document.getElementById('quote_list').appendChild(p);
  
      return(
        getList.map(item =&gt; {
          cite.innerHTML = item.quote;
          p.innerHTML = item.name;
        })
      )
    }
  
    const setData = () =&gt; {
      let getList = JSON.parse(localStorage.getItem('key_name'));
      const quote = document.quoteForm.quote.value;
      const name = document.quoteForm.name.value;
      const data = {name: name, quote: quote};
      const JsonData = JSON.stringify(data);
      localStorage.setItem('entry', JsonData);
      getList.push(JsonData);
      localStorage.setItem('key_name', JSON.stringify(getList));
      process();
    }
  
    window.addEventListener('onload', process());
  </code></pre>
  
  <p>If I add another entry from the form element it works just fine.
  If I reload the browser it returns only the last item from the array.
  <code>setData()</code> is triggered when I click the <code>submit button</code> of the <code>form</code>.</p>