尝试存储表并在刷新后加载它？答案

【问题标题】：Trying to store a table and have it load after refresh?尝试存储表并在刷新后加载它？
【发布时间】：2017-02-18 05:47:31
【问题描述】：

我从表单中获取信息，并将其作为对象存储到数组中。然后我将其字符串化，并将其存储到本地存储中。从本地存储中获取它，并试图让这一行出现。它是一个“待办事项”网络应用程序。

我希望它保存任务，以便当我返回/刷新页面时它们就在那里。但每次我刷新页面时，它都会消失。不过，刷新后信息似乎仍存储在本地存储中。所以这不是问题。但是，如果我刷新，然后添加一个新任务，它会擦除存储空间，以便只添加该会话中的新任务。

我怎样才能穿上它？我可以添加一个任务，然后保存所有内容，并在我刷新后让所有内容保持不变？

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

谢谢！

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;
}

【问题讨论】：

添加设计或创建小提琴，使其易于理解
jsfiddle.net/ptzkLqc4 ... 尝试制作小提琴，但它并没有真正正常工作

标签： javascript arrays function object tablerow

【解决方案1】：

在这里我已经修复了你的填充工作 >> 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。

【讨论】：