如何在本地存储中存储附加到项目列表的动态生成的选中复选框

Question

I want to store check-boxes that are checked and store them in local storage.When I refresh the browser or reload I want the check-boxes to be saved, checked if checked or unchecked when unchecked. The check-boxes are attached to a dynamically generated list of items.

var inputValue = document.getElementById('myText');
var p = document.getElementById('ul');
var list = document.getElementById('list');
let itemsArr = [];
let id = 0;
let data = localStorage.getItem("myItems");

   // Check for data in storage

   if (data) {
      itemsArr = JSON.parse(data);
          loadList(itemsArr)
      }

   function loadList(myItems) {

      myItems.forEach(el => {

   var html = 
      `<li id="${el.id}" class="item"><input type="checkbox" id="check">
      <span class="todo">${el.name}</span>
      <span><img src="delicon.png" class="delCrss"></span>
      <hr class="line"></li>`;

          p.insertAdjacentHTML("beforeend", html);
          id++;
       });
    }

   //Submit button, submit data and make list

   var submit = document.getElementById('btn');
             submit.addEventListener('click', addItemToList);

   function addItemToList(e) {
             event.preventDefault();
   var html = 
         `<li id="${id}" class="item"><input type="checkbox" id="check">
          <span class="todo">${inputValue.value}</span>
          <span><img src="delicon.png" class="delCrss"></span>
          <hr class="line"></li>`

     if (inputValue.value === '') {
         alert("Please enter valid data!");
     }else{
         p.insertAdjacentHTML('beforeend', html)
       }
         itemsArr.push({
                name: inputValue.value,
                  id: id
         });

               id++
               localStorage.setItem("myItems", JSON.stringify(itemsArr));
               inputValue.value = "";
        }

Answer 1

Like so:

// Store checkbox states
function save(){
   var checkboxes = document.querySelectorAll('input[type="checkbox"]')
     var state = [];
      for(var i=0; i < checkboxes.length; i++){
      var chBox = checkboxes[i].checked ? true : false
    state.push(chBox)
}
    localStorage.setItem("checkboxes", JSON.stringify(state))
     console.log(state)
}

function restore(){
  if(localStorage.getItem('checkboxes') !== null){
    var state = JSON.parse(localStorage.getItem('checkboxes'));
    var chBox = document.getElementsByName("chbx"); 
      for (var i = 0; i < chBox.length; i++) {
          chBox[i].checked = state[i]
     }
   }
}