Save previous submissions in local storage JavaScript

Question

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 setItem(), it overrides all previous submissions. How else can I do this to preserve any prior submissions?

I tried to create a JSFiddle with my code to send with this post, but the code gives error in the console on JSFiddle. It works just fine locally. The raw and fully commented code is pasted below.

NOTE: This post is not a duplicate as it is dealing with session storage instead of local storage.

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 = "<div class=\"info\">";

       s += '<div class="nameDiv">';
       if (dataObject.name !== 'undefined') {
         s += dataObject.name;
       }
       s += '</div><div class="addrDiv">';
       if (dataObject.address !== 'undefined') {
         s += dataObject.address;
       }
       s += '</div><div class="emailDiv">';
       if (dataObject.email !== 'undefined') {
         s += dataObject.email;
       }
       s += '</div></div>';

       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 < credList.length; i++) {
         var newCred = new Credential(credList[i].name, credList[i].address, credList[i].email);
         storageArray.push(newCred);
         writeRowToPage(newCred, 'output');
       }
     }
   }


 )();

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;
}

<!doctype html>
<html>

<head>

  <link rel="stylesheet" href="css/cscie3.css">
</head>

<body>
  <label for="name">Name</label>
  <input type="text" size="40" id="name">
  <br>
  <label for="address">Address</label>
  <input type="text" size="40" id="address">
  <br>
  <label for="email">Email</label>
  <input type="text" size="40" id="email">
  <br>
  <button id="doit" class="button">Save</button>

  <h2>My Records</h2>
  <div id="output">
    <div class="info infoHead">
      <div>Name</div>
      <div>Address</div>
      <div>Email</div>
    </div>
  </div>

  <script tyle="text/javascript" src="js/hw2b_v3.js"></script>
</body>

</html>

score 2 · Accepted Answer · edited Jul 20 '20 at 19:19

Thats because every time page loaded you get new array and set new values in localStorage. So try this

"use strict";

// First we do a self-invoking function that contains everything - there will be nothing
//  exposed to the global scope.
(function(){
    var storageArray = localStorage["storageArr"] ? JSON.parse(localStorage["storageArr"]) : [];
    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 = "<div class=\"info\">";

        s+='<div class="nameDiv">';
        if (dataObject.name !== 'undefined') {
            s+=dataObject.name;
        }
        s+= '</div><div class="addrDiv">';
        if (dataObject.address !== 'undefined') {
            s+=dataObject.address;
        }
        s+= '</div><div class="emailDiv">';
        if (dataObject.email !== 'undefined') {
            s+=dataObject.email;
        }
        s+= '</div></div>';

        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().  */
     function retrieve() {
    var localMemory = window.localStorage.getItem("localArr");
    var parsedLocalMemory = JSON.parse(localMemory);
    
    if (parsedLocalMemory != null){
        for (var i = 0; i < parsedLocalMemory.length; i++) {
            var nextPerson = new AddrBookEntry (parsedLocalMemory[i].name, parsedLocalMemory[i].addr, parsedLocalMemory[i].email);
            writeRowToPage(nextPerson, output);
        }
    }
}
}


)();

Save previous submissions in local storage JavaScript

1 Answers1