JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<input type="checkbox" id="1" class="box">checkbox1</input><br>
<input type="checkbox" id="2" class="box">checkbox2</input><br>
<input type="checkbox" id="3" class="box">checkbox3</input><br>
<input type="checkbox" id="4" class="box">checkbox4</input><br>
<input type="checkbox" id="5" class="box">checkbox5</input><br>
<input type="checkbox" id="6" class="box">checkbox6</input><br>

JavaScript

let boxes = document.getElementsByClassName('box').length;

function save() {	
  for(let i = 1; i <= boxes; i++){
	  var checkbox = document.getElementById(String(i));
    localStorage.setItem("checkbox" + String(i), checkbox.checked);	
  }
}

//for loading
for(let i = 1; i <= boxes; i++){
  if(localStorage.length > 0){
    var checked = JSON.parse(localStorage.getItem("checkbox" + String(i)));
    document.getElementById(String(i)).checked = checked;
  }
}
window.addEventListener('change', save);