リロード後にチェックボックスの状態を保存する（TODOリスト）

Question

私はJSでちょっと新しく、本当に助けが必要です！ 私は単純なTodoリストアプリケーションに取り組んでいます。 私のHTMLは

<div class="centerer"> 
    <div class="title"> 
     TODO List 
    </div> 
    <form> 
     <label> 
      <input id="new-task-input" type="text" placeholder="TODO"> 
     </label> 
     <button type="button" id="add-task-button"> 
      Add 
     </button> 
    </form> 
    <ul id="todolist-container"> 
     <li class="task"> 
      <label><input type="checkbox" class="checkbox"> 
       Default Test Value 
       <input type="button" class="delete-btn" value="X"> 
      </label> 
     </li> 
    </ul> 
    <input type="button" id="delete-all" value="Delete All" onclick="wantDelete()"> 

    <script type="text/template" id="list-item-template"> 
     <li class="task"> 
      <label> 
       <input type="checkbox" class="checkbox"> 
       <span class="checkbox-custom"></span> 
       <span class="task-name label"><!-- TODO --></span> 
       <input type="button" class="delete-btn" value="X"> 
      </label> 
     </li> 
    </script> 
    <script type="text/template" id="list-item-template-completed"> 
     <li class="task"> 
      <label> 
       <input type="checkbox" class="checkbox"> 
       <span class="checkbox-custom"></span> 
       <span class="task-name label completed"><!-- TODO --></span> 
       <input type="button" class="delete-btn" value="X"> 
      </label> 
     </li> 
    </script> 

チェックボックスは、「ラベル」の助けで飾ら少しです。

アプリの主なアイデアは、次のとおりです。 - （これでOK）新しい藤堂を追加 - タスクが実行された場合は、後の「checkboxing」ライン・スルー装飾 - （もOK）ボタン 「×」を押して藤堂を削除します。出現しました（またOKです） すべての情報もlocalstorageに保存する必要があります。

しかし、ページを再読み込みした後、チェックボックスの状態は保存されません。装飾状態のみが保存されます。

私のJSは

window.Todo = { 
    addTaskButton: document.getElementById("add-task-button"), 
    newTaskInput: document.getElementById("new-task-input"), 
    container: document.getElementById("todolist-container"), 
    template: document.getElementById("list-item-template").innerText, 
    templateCompleted: document.getElementById("list-item-template-completed").innerText, 

    setup: function() { 
     Todo.addTaskButton.addEventListener('click', Todo.onAddTaskClicked); 
     Todo.container.addEventListener('click', Todo.onTodolistClicked); 
     Todo.renderTasks(); 
    }, 

    onAddTaskClicked: function() { 
     var taskName = Todo.newTaskInput.value; 
     Todo.newTaskInput.value = ""; 
     var taskHTML = Todo.template.replace("<!-- TODO -->", taskName); 
     Todo.container.insertAdjacentHTML('afterbegin', taskHTML); 
     Todo.saveTask(taskName, false); 
    }, 

    onTodolistClicked: function(event) { 
     var targetElement = event.toElement; 
     if(targetElement.className !== "delete-btn"){ 
      while (!targetElement.classList.contains("task")) { 
       targetElement = targetElement.parentElement; 
      } 

      var checkbox = targetElement.querySelector(".checkbox"); 
      var toLineThrough = targetElement.querySelector(".task-name"); 
      if (checkbox.checked) { 
       toLineThrough.classList.add("completed"); 
      } else { 
       toLineThrough.classList.remove("completed"); 
      } 

      var taskNameElement = targetElement.querySelector(".task-name"); 
      var taskName = taskNameElement.innerText; 


      Todo.saveTask(taskName, checkbox.checked); 
     } 
     else{ 
      while (!targetElement.classList.contains("task")) { 
       targetElement = targetElement.parentElement; 
      } 

      var taskNameElement = targetElement.querySelector(".task-name"); 
      var taskName = taskNameElement.innerText; 
      localStorage.removeItem(taskName); 
      window.location.reload(true); 
     } 
    }, 

    saveTask: function(name, isCompleted) { 
     window.localStorage.setItem(name, JSON.stringify(isCompleted)); 
    }, 

    renderTasks: function() { 
     for (var i = 0; i < window.localStorage.length; i++) { 
      var taskName = window.localStorage.key(i); 
      var isCompleted = JSON.parse(window.localStorage.getItem(taskName)) === "true"; 
      var taskHTML = Todo.template.replace("<!-- TODO -->", taskName); 

      if (!isCompleted) { 
       Todo.container.insertAdjacentHTML('afterbegin', taskHTML); 
      } 
      else { 
       var taskName1 = window.localStorage.key(i); 
       var taskHTML1 = Todo.templateCompleted.replace("<!-- TODO -->", taskName1); 
       Todo.container.insertAdjacentHTML('afterbegin', taskHTML1); 
      } 
     } 
    } 
} 

    Todo.setup(); 

    function wantDelete() { 
     localStorage.clear(); 
     window.location.reload(true); 
    } 

はたぶん誰かがチェックボックスの状態を保存する方法を助けることができるのですか？ そして、2つのテンプレートを取ってレンダー機能が良くないと私は理解していますが、私の脳はそれを再現することができます。

何か助けてください！

Answer 1

私の命題は

localStorage.setItem（「男性」、「真の」）のlocalStorageするために特定のフィールドの値を保存することです。 Localstorageについて詳しくは、こちらをご覧ください。