テーブルを保存しようとしていて、リフレッシュ後にロードしていますか？

Question

私はフォームから情報を取り出し、オブジェクトとして配列に格納しています。 それを文字列化してローカルストレージに格納しています。 ローカルストレージからそれを取得し、 行を表示しようとしています。 その "to do list"ウェブアプリ。

タスクを保存して、私が戻ってくる/ページをリフレッシュするときにそこにいるようにしたい。しかし、私はページを更新するたびに、それは単に消えます。しかし、情報が更新された後でもローカルストレージに保存されているように見えます。そうは問題ではありません。しかし、リフレッシュしてから新しいタスクを追加すると、そのセッション内の新しいタスクだけが追加されるようにストレージが消去されます。

これを身に着けるにはどうすればいいですか？タスクを追加してからすべてを保存し、更新した後もすべてを保持できますか？

ファイルの先頭に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値によって、あなたのlocalStorageを上書きするので、あなたが負荷にのlocalStorage値とtoDoArray入力する必要があり、basicly 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]); 
    } 
} 

---

>>動作するようにあなたのfilldeを修正しました。