Enregistrer les cases à cocher état après rechargement (TODO list)

Question

Je suis un peu nouveau chez JS et j'ai vraiment besoin de votre aide! Je travaille sur une simple application de liste Todo. Mon Html est

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

est un Checkboxes peu décoré avec l'aide "label".

L'idée principale de l'application est: - Ajouter un Todo (ok avec elle) - Supprimer Todo en appuyant sur « x » bouton (également ok) - Si la tâche est terminée, après la décoration de ligne par « checkboxing » est apparu (aussi ok woth it) Toutes les informations devraient également stocker dans localstorage (également ok).

Mais après avoir rechargé la page, l'état des cases à cocher ne sauve pas. Seul l'état de décoration est enregistré.

Mon JS est

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

Peut-être que quelqu'un pourrait aider à économiser l'état des cases à cocher? Et je comprends que la fonction de rendu n'est pas bonne à cause de la prise de 2 modèles différents, mais mon cerveau pourrait reproduire juste cela ..

Merci pour toute aide!

Answer 1

Ma proposition est de sauver la valeur des champs spécifiques à localStorage

localStorage.setItem ('mâle', 'true'); En savoir plus sur Localstorage, il pourrait aider.