How to store dynamically generated checked check-boxes attached to a list of items in local storage

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