Javascript 如何在刷新后呈现本地存储中的所有密钥

我试图将日期保存在表中，以便即使在刷新之后，所有值仍然存在。以下是我的JS代码：

//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);

//构建我的表
var contactColumn=document.getElementById（“contactInfo”）；
var headerRow=document.createElement（'tr'）；
var newInfoColumn=document.createElement（'th'）；
appendChild（document.createTextNode（“名称”））；
headerRow.appendChild（newInfoColumn）；
contactColumn.appendChild（headerRow）；
变量类别=[‘年龄’、‘性别’、‘地址’、‘联系电话’、‘会面地点’、‘其他信息’]；
对于（var i=0；iJavaScript是一种客户端脚本语言，一旦刷新它，您就不能重新注册它的值。
因此，如果您需要这些值，即使在刷新页面后，也要尝试将这些值存储在某个文件或数据库中以获取这些数据
，但本地存储不应该作为一种本地数据库工作吗？我只是尝试在同一台机器上本地呈现。Chk此链接：-希望您可以从linkon页面加载中找到一些解决方案，您需要检查本地存储对于已保存的数据，如果找到，则应加载该数据，否则应加载新表