title: JavaScript ToDo list, how to keep toggled classes after page refreshing
body: <p>I was making ToDo List in JS: add new task, check task, remove task.
  Aside from one thing everything is working fine.
  The problem is that after adding new item to list it's displayed again and removes class &quot;checked&quot; from checked elements. I want to prevent it.
  I was trying to remove function <code>clearList()</code>, which worked, but previous lists are kept on the screen.
  How can I keep toggled classes after page refreshing?</p>
  <pre><code>&quot;use strict&quot;;
  let inputData = document.querySelector('[data-input-text]');
  let inputTextData = document.querySelector('.to-do-new-input');
  let btnAdd = document.querySelector('.btn-add');
  let listContainer = document.querySelector('.to-do-list-wrapper');
  
  let tasksList = [];
  
  inputTextData.addEventListener('submit', e=&gt;{
    e.preventDefault();
    addNewtask(inputData.value);
    inputData.value = null;
    displayList(...tasksList);
    checkTask();
    deleteTask(); 
  })
  
  
  function addNewtask(task){
    if(task==='') return;
    let newTask= task;
    tasksList.push(newTask);
  }
  
  function displayList(...list){
    clearList();
    list.forEach((item, index)=&gt;{
      let taskRow = 
      `
      &lt;div class=&quot;to-do-list-row&quot; data-target-id=&quot;${index}&quot;&gt;
          &lt;div class=&quot;to-do-list-item&quot;&gt;${item}&lt;/div&gt;
          &lt;div class=&quot;to-do-list-item-remove btn&quot;&gt;
            &lt;span class=&quot;material-icons btns-ico btn-check&quot;&gt;check_circle&lt;/span&gt;
            &lt;span class=&quot;material-icons btns-ico btn-remove&quot;&gt;delete&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      `;
      listContainer.insertAdjacentHTML('afterbegin', taskRow);
      
  
    })
   
  }
  
  function clearList(){
    while(listContainer.firstChild){
      listContainer.removeChild(listContainer.lastChild);
    }
  }
  
  function checkTask(){
    let btnsCheck = document.querySelectorAll('.btn-check');
    btnsCheck.forEach(btn=&gt;{
      btn.addEventListener('click',e=&gt;{
        e.preventDefault();
        let taskTarget =  e.target.parentElement.parentElement;
        taskTarget.classList.toggle('checked');
      })
    })
  }
  
  function deleteTask(){
    let btnsDelete = document.querySelectorAll('.btn-remove');
    btnsDelete.forEach(btn=&gt;{
      btn.addEventListener('click', e=&gt;{
        let taskTarget =  e.target.parentElement.parentElement;
        let targetId = taskTarget.dataset.targetId;
        tasksList.splice(targetId, 1);
        taskTarget.remove(e.target.parentElement.parentElement);
      })
    })
  }
  </code></pre>
  <p>Here is link to code and demo:
  <a href="https://codepen.io/Nepri/pen/LYOXRLO" rel="nofollow noreferrer">https://codepen.io/Nepri/pen/LYOXRLO</a></p>
  <p>Thanks in advance.</p>
  <p>I thought that it must be possible, so following answer in the comment I removed <code>clearList()</code> and changed <code>function addNewTask</code> and <code>function displayList</code> to keep past tasks and only add new one.
  It worked, no clearing and toggled items are kept.<br />
  But it's still bugged, it's possible to only check every second task, or two in row if one was removed, some task are impossible to uncheck if new are not added.</p>
  <p>If someone can check it and tell whats wrong I wll be really grateful.</p>
  <pre><code>&quot;use strict&quot;;
  let inputData = document.querySelector('[data-input-text]');
  let inputTextData = document.querySelector('.to-do-new-input');
  let btnAdd = document.querySelector('.btn-add');
  let listContainer = document.querySelector('.to-do-list-wrapper');
  
  let tasksList = [];
  let id=tasksList.length;
  let previousList;
  
  inputTextData.addEventListener('submit', e=&gt;{
    e.preventDefault();
    addNewTask(inputData.value);
    checkTask();
    deleteTask(); 
    let id=tasksList.length;
  })
  
  function addNewTask(input){
    if(input==='') return;
    let newTask = input;
    id++;
    tasksList.push({
      &quot;id&quot;: id,
      &quot;task&quot;: newTask,
      &quot;status&quot;: false
    })
    inputData.value='';
  
      let lastAddedTask= tasksList.slice(-1);
      displayList(...lastAddedTask);
  }
  
  function displayList(...list){
    if(list===null)return;
    list.forEach(item=&gt;{
      let listId = item.id;
      let listTask = item.task;
      let listStatus= item.status;
  
      let newRow=`
      &lt;div class=&quot;to-do-list-row&quot; data-target-id=&quot;${listId}&quot;&gt;
      &lt;div class=&quot;to-do-list-item&quot;&gt;${listTask}&lt;/div&gt;
        &lt;div class=&quot;to-do-list-item-remove btn&quot;&gt;
          &lt;span class=&quot;material-icons btns-ico btn-check&quot;&gt;check_circle&lt;/span&gt;
          &lt;span class=&quot;material-icons btns-ico btn-remove&quot;&gt;delete&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      `;
      listContainer.insertAdjacentHTML('afterbegin', newRow);
  
    })
  }
  
  function checkTask(){
    let btnsCheck = document.querySelectorAll('.btn-check');
    btnsCheck.forEach(btn=&gt;{
      btn.addEventListener('click', ()=&gt;{
        btn.parentElement.parentElement.classList.toggle('checked');
      })
    })
  }
  
  function deleteTask(){
    let btnsDelete = document.querySelectorAll('.btn-remove');
    btnsDelete.forEach(btn=&gt;{
      btn.addEventListener('click', e=&gt;{
        let taskTarget =  e.target.parentElement.parentElement;
        let targetId = taskTarget.dataset.targetId;
        tasksList.splice(targetId, 1);
        taskTarget.remove(e.target.parentElement.parentElement);
      })
    })  
  }
  </code></pre>