Currently, I am developing a JavaScript program that involves 3 input boxes. The program is designed to display whatever is typed into each input box on the page. To store and re-display previous submissions, I have implemented local storage. However, I encountered an issue where using setItem() overrides all the previous submissions. Can someone suggest an alternative method to preserve prior submissions?
While attempting to create a JSFiddle link with my code for reference, I faced errors in the console on the JSFiddle platform. Surprisingly, the code functions perfectly fine locally. Below, you will find the raw code with detailed comments.
Note: This inquiry is distinct from the discussion on session storage found here.
Code:
"use strict";
// A self-invoking function encapsulates the entire code to avoid global scope pollution.
(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() {
// Obtain values from the form fields
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var email = document.getElementById("email").value;
// Create a new data object representing the input values
var data = {
name, address, email
};
// Display the new data object on the page
writeRowToPage(data, output);
// Store the object in localStorage without overwriting previous data
storageArray.push(data);
window.localStorage.setItem("storageArr", JSON.stringify(storageArray));
}
/* This function writes a single submission row onto the page based on the dataObject provided */
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;
}
/* Retrieve existing data from localStorage upon page load, convert it into data objects,
then display these objects on 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>