테이블을 저장하려고하고 새로 고침 후로드해야합니까?

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

난 당신이 toDoArray 값으로 사용자의 로컬 스토리지를 덮어 쓰기 때문에, 당신은 부하에 로컬 스토리지 값 toDoArray을 작성해야 >> 작업을 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]); 
    } 
} 

---

basicly 당신의 fillde를 해결했습니다 .