Question

我正在尝试将日期保存在我的表中，以便即使在刷新之后，所有值仍然存在。这是我的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);

所以概念是即使刷新后，用户和数据仍然在表中。目前，在刷新时，行已消失，但用户信息保存在本地存储中。我无法调用所有键值并重新进入表格。

Answer 1

JavaScript是一种客户端脚本语言，一旦刷新它就无法重新获得它的价值。因此，如果您在刷新页面后需要这些值，请尝试将这些值存储在某个文件或数据库中以获取这些数据

刷新后如何在本地存储中呈现所有键

1 个答案: