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

【问题标题】：How to store dynamically generated checked check-boxes attached to a list of items in local storage如何在本地存储中存储附加到项目列表的动态生成的选中复选框
【发布时间】：2019-12-15 21:01:23
【问题描述】：

我想存储选中的复选框并将它们存储在本地存储。当我刷新浏览器或重新加载时，我希望复选框被保存，如果选中则检查或未选中时取消选中。复选框附加到动态生成的项目列表中。

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 = "";
        }

【问题讨论】：

标签： javascript checkbox local-storage

【解决方案1】：

像这样：

// 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]
     }
   }
}

【讨论】：