时间戳

首页 > 解决方案 > 如何在本地存储中存储附加到项目列表的动态生成的选中复选框

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

问题描述

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

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

标签： javascriptcheckboxlocal-storage

解决方案

像这样：

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

推荐阅读