SO54129379

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <form id='main' onsubmit='return false'>
    <input class='chx' type='checkbox'>
    <input class='chx' type='checkbox'>
    <input class='chx' type='checkbox'>
    <input class='chx' type='checkbox'>
    <input class='chx' type='checkbox'>
    <input class='chx' type='checkbox'>
  </form>
  <script>
    var main = document.forms[0];

    !(function(m) {
      var values = JSON.parse(localStorage.getItem('chx')) || [];
      values.forEach(function(val, idx) {
        if (val === 1) {
          m.elements[idx].setAttribute('checked', true);
        }
      });
    })(main);

    main.addEventListener('change', saveChx);

    function saveChx(e) {
      var chxArray = Array.from(main.elements);
      var values = chxArray.map(function(chk) {
        return chk.checked ? 1 : 0;
      });
      console.log(values);
      return localStorage.setItem('chx', JSON.stringify(values));
    }
  </script>
</body>

</html>