title: Save previous submissions in local storage JavaScript
body: <p>I am making a JavaScript program. It uses 3 input boxes which then displays what you type into each input box into the page. I am using local storage to re-print previous submissions, but when I use <code>setItem()</code>, it overrides all previous submissions. How else can I do this to preserve any prior submissions?</p>
  
  <p>I tried to create a <code>JSFiddle</code> with my code to send with this post, but the code gives error in the console on <code>JSFiddle</code>. It works just fine locally. The raw and fully commented code is pasted below. </p>
  
  <p><strong>NOTE:</strong> <a href="https://stackoverflow.com/questions/7859972/storing-credentials-in-local-storage">This post</a> is not a duplicate as it is dealing with session storage instead of local storage.</p>
  
  <p><strong>Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> "use strict";
  
   // First we do a self-invoking function that contains everything - there will be nothing
   //  exposed to the global scope.
   (function() {
       var storageArray = [];
       window.onload = retrieve();
  
       function Credential(name, address, email) {
         this.name = name;
         this.address = address;
         this.email = email;
       }
       var button = document.getElementById("doit");
       button.onclick = function() {
         /*  This function will run when the user clicks on the
          *  Save button.  */
  
         //Step #1 - we get values from the form
         var name = document.getElementById("name").value;
         var address = document.getElementById("address").value;
         var email = document.getElementById("email").value;
  
         // Step #2 - you will create a new data object
         var data = {
           name, address, email
         };
  
         // Step #3 - call on writeRowtoPage() to write your new data object to the page
         writeRowToPage(data, output);
         // Step#4 - Store your object in localStorage (preserving data
         //          that's already in there from prior submissions!)
         storageArray.push(data);
         window.localStorage.setItem("storageArr", JSON.stringify(storageArray));
       }
  
       /* This function accepts two arguments -
              @dataObject: your data object representing a single
                        submission of the data form, which corresponds
                        to one row in the table
              @element:   the element on the page to which to write the output
      
              The function assembles a string of HTML, using the data from
              dataObject.  Once the string is complete, it is appended to the
              page using innerHTML.
           */
       function writeRowToPage(dataObject, element) {
         var s = "&lt;div class=\"info\"&gt;";
  
         s += '&lt;div class="nameDiv"&gt;';
         if (dataObject.name !== 'undefined') {
           s += dataObject.name;
         }
         s += '&lt;/div&gt;&lt;div class="addrDiv"&gt;';
         if (dataObject.address !== 'undefined') {
           s += dataObject.address;
         }
         s += '&lt;/div&gt;&lt;div class="emailDiv"&gt;';
         if (dataObject.email !== 'undefined') {
           s += dataObject.email;
         }
         s += '&lt;/div&gt;&lt;/div&gt;';
  
         element.innerHTML += s;
       }
  
  
       /* Upon page load, look in localStorage for any existing data, create data objects from it, and write those data objects to the page using writeRowToPage().  */
       var credString = window.localStorage.getItem("storageArr");
       var credList = JSON.parse(credString);
  
       function retrieve() {
         for (var i = 0; i &lt; credList.length; i++) {
           var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email);
           storageArray.push(newCred);
           writeRowToPage(newCred, 'output');
         }
       }
     }
  
  
   )();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333;
  }
  .button {
    border: 1px solid #888888;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    height: 30px;
    width: 82px;
    line-height: 14px;
    padding: .5em;
    text-align: center;
    background-color: #614C26;
  }
  .button:hover {
    border: 2px solid #000;
  }
  label {
    display: inline-block;
    width: 5em;
  }
  .info div {
    display: inline-block;
    width: 10em;
  }
  .infoHead {
    font-weight: bold;
    border-bottom: 1px solid gray;
    width: 30em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
    &lt;link rel="stylesheet" href="css/cscie3.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;label for="name"&gt;Name&lt;/label&gt;
    &lt;input type="text" size="40" id="name"&gt;
    &lt;br&gt;
    &lt;label for="address"&gt;Address&lt;/label&gt;
    &lt;input type="text" size="40" id="address"&gt;
    &lt;br&gt;
    &lt;label for="email"&gt;Email&lt;/label&gt;
    &lt;input type="text" size="40" id="email"&gt;
    &lt;br&gt;
    &lt;button id="doit" class="button"&gt;Save&lt;/button&gt;
  
    &lt;h2&gt;My Records&lt;/h2&gt;
    &lt;div id="output"&gt;
      &lt;div class="info infoHead"&gt;
        &lt;div&gt;Name&lt;/div&gt;
        &lt;div&gt;Address&lt;/div&gt;
        &lt;div&gt;Email&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script tyle="text/javascript" src="js/hw2b_v3.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>