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