brld brld - 1 month ago 14
CSS Question

Save previous submissions in local storage JavaScript

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>




Answer

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().  */
     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');
      }
    }
}


)();