I am trying to save the date in my table so that even after refresh, all the values are still present. HERE IS MY JS CODE:
//BUILDING MY TABLE
var contactColumn = document.getElementById("contactInfo");
var headerRow = document.createElement('tr');
var newInfoColumn = document.createElement('th');
newInfoColumn.appendChild(document.createTextNode("Name"));
headerRow.appendChild(newInfoColumn);
contactColumn.appendChild(headerRow);
var categories = ['Age', 'Gender', 'Address', 'Contact Number', 'Meet Up Location', 'Additional Info'];
for (var i=0; i<categories.length; i++) {
var categoriesHeader = document.createElement('th');
categoriesHeader.appendChild(document.createTextNode(categories[i]));
headerRow.appendChild(categoriesHeader);
}
//OBJECT CONSTRUCTOR FOR USER
var CList = function(username, age, gender, address, contactNo, meetUpLoc, extraInfo, key) {
this.username = username;
this.age = age;
this.gender = gender;
this.address = address;
this.contactNo = contactNo;
this.meetUpLoc = meetUpLoc;
this.extraInfo = extraInfo;
this.key = key;
this.infoArray = [age, gender, address, contactNo, meetUpLoc, extraInfo, key];
var infoRow = document.createElement('tr');
var userNameRow = document.createElement('td');
userNameRow.appendChild(document.createTextNode(this.username));
infoRow.appendChild(userNameRow);
contactColumn.appendChild(infoRow);
//APPENDS OBJECT INTO TABLE
for (var i=0; i<categories.length; i++) {
var contentInfoContact = document.createElement('td');
contentInfoContact.appendChild(document.createTextNode(this.infoArray[i]));
infoRow.appendChild(contentInfoContact);
}
//SAVES USER TO LOCAL STORAGE
var infoToSave = JSON.stringify(this.username+","+this.infoArray);
localStorage.setItem(this.key, infoToSave);
var getInfo = JSON.parse(localStorage.getItem(this.username));
};
//FUNCTION TO GET VALUES FROM FORM AND SENDS TO OBJECT CONSTRUCTOR
var newUserSubmit = function(e) {
e.preventDefault();
var newUser = document.getElementById('username');
var newAge = document.getElementById('age');
var newGender = document.getElementById('gender');
var newAddress = document.getElementById('address');
var newContactNo = document.getElementById('contactNo');
var newMeetUpLoc = document.getElementById('meetUpLoc');
var newExtraInfo = document.getElementById('extraInfo');
var newUserForm = new CList((newUser.value.toUpperCase()), newAge.value, (newGender.value.toUpperCase()), newAddress.value, newContactNo.value, newMeetUpLoc.value, newExtraInfo.value, Math.random());
newUser.value = null;
newAge.value = null;
newGender.value = null;
newAddress.value = null;
newContactNo.value = null;
newMeetUpLoc.value = "Primary: Secondary:";
newExtraInfo.value = null;
};
//EVENT HANDLER ON CLICK
var submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', newUserSubmit);
//HERE I AM TRYING TO RERENDER ALL KEY VALUES
window.onload=function() {
var checked = JSON.parse(localStorage.getItem(localStorage.key));
}
var bob = JSON.parse(localStorage.getItem("1"));
console.log(bob);
So the concept is that even after refresh, the user and data are still in the table. Currently, on refresh, the rows are gone but the user info saved in local storage. I am having trouble calling ALL key values and pushing back into the table.
