Question

我从表单中获取信息，并将其作为对象存储到数组中。然后我将其串联，并将其存储到本地存储中。从本地存储中抓取它，并尝试将该行显示出来。它是一个“待办事项列表”的网络应用程序。

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

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

我尝试在我的文件顶部调用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;
}

Answer 1

这里我已经修复了你的工作＆gt;＆gt; 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。

试图存储一个表并在刷新后加载它？

1 个答案: