尝试存储 table 并在刷新后加载它？

Question

我正在从表单中获取信息，并将其作为对象存储到数组中。然后我将其字符串化，并将其存储到本地存储中。从本地存储中获取它，并试图让该行出现。它是一个 "to do list" 网络应用程序。

我希望它保存任务，以便在我访问 back/refresh 页面时它们就在那里。但每次我刷新页面，它就消失了。不过，看起来信息在我刷新后仍存储在本地存储中。所以这不是问题。但是，如果我刷新，然后添加一个新任务，它会擦除存储，以便只添加该会话中的新任务。

我怎样才能戴上这个我可以添加一个任务，然后保存所有内容，即使我刷新后所有内容都保持不变？

我尝试在我的文件顶部调用 buildTable 函数，认为它可能会构建 table 所以当我加载页面时它就在那里，但它不起作用。

谢谢！

var table = document.getElementById("tableBody");


var toDoArray = [];
buildTable();

function buildTable(){

var retrievedTaskObject = localStorage.getItem("task");
var parsedObject = JSON.parse(retrievedTaskObject);
var addTheTaskName = parsedObject.taskName;
var addTheTaskDate = parsedObject.taskDate;

for(i=0; i < toDoArray.length; i++){
  addTaskToTable(parsedObject[i]);
}



}

function addTaskToTable(obj){
  var row = table.insertRow(0);
  var cellName = row.insertCell(0);
  var cellDate = row.insertCell(1);
  var cellId = row.insertCell(2);
  var cellCheck = row.insertCell(3);
  cellName.innerHTML= obj.name;
  cellDate.innerHTML= obj.date;
  var checkStuff = "<input type='checkbox'>";
  cellCheck.innerHTML = checkStuff;

}

function submitForm(name,date) {
    var addTaskName = document.getElementById("taskName").value;
    var addTaskDate = document.getElementById("dateTask").value;
    var taskSomething = getTaskObj(addTaskName,addTaskDate);
      toDoArray.push(taskSomething);
      addTaskToTable(taskSomething);
      var storedArray = JSON.stringify(toDoArray);
      localStorage.setItem("task",storedArray);
};

function getTaskObj(taskName,taskData){
var taskObject = {
        name: taskName,
        date: taskData,
      };
 return taskObject;
}

Answer 1

这里我已经修复了你的 fillde 工作 >> https://jsfiddle.net/ptzkLqc4/1/

function buildTable() {
  var retrievedTaskObject = localStorage.getItem("task");
  var parsedObject = JSON.parse(retrievedTaskObject);
  for (i = 0; i < parsedObject.length; i++) {
      toDoArray.push(getTaskObj(parsedObject[i].name, parsedObject[i].date));
      addTaskToTable(parsedObject[i]);
  }
}

基本上，由于您用 toDoArray 值覆盖了 localStorage，因此您需要在加载时用 localStorage 值填充 toDoArray。

尝试存储 table 并在刷新后加载它？

Trying to store a table and have it load after refresh?

javascript

arrays

function

object

tablerow