How can I apply localStorage to input checkbox?

Question

Note: I'm using vanilla js only.

I currently have a working script to add/remove classes via select options as well localStorage . All works great, see jsfiddle here .

Now, I'm wanting to add two checkbox's to perform in the same way. My problem is I'm not sure how to add checkboxes to my current localStorage script.

Here are my checkbox's :

<input type="checkbox" name="checkbox1" id="checkbox1" onchange="checkbox1(this)">
<input type="checkbox" name="checkbox2" id="checkbox2" onchange="checkbox2(this)">

And add/remove class on check/uncheck for checkbox1:

var checkbox = document.getElementById('checkbox1');
checkbox.addEventListener("change", checkbox1, false);

function checkbox1() {
    var isChecked = checkbox.checked;
    if (isChecked) {
        [].map.call(document.querySelectorAll('body,.nc,.tags'), function(el) {
            el.classList.add('classname');
        });
    } else {
        [].map.call(document.querySelectorAll('body,.nc,.tags'), function(el) {
            el.classList.remove('classname');
        });

    }
}

Works fine. Now I just need to add it to localStorage .

Here's my localStorage script that works for my select options (full example in my jsfiddle). How do I modify it to work for my checkbox's as well? I'm assuming I have to modify the second line to check for checkbox instead of options but I'm not sure how.

function selectTest(element) {
  const a = element.options[element.selectedIndex].value;
  setTest(a);
  localStorage['test'] = a;
}


function setTest(a) {
  if (a == "option1") {

    //add+remove classes here 

  }
}

(function() {

  if (localStorage['test'])
    document.getElementById("test").value = localStorage['test'];
  setTest(localStorage['test'])

})();

Answer 1

Here is the JS Fiddle if you just directly want to see the code https://jsfiddle.net/qctn08ym/44/

The idea is that since multiple checkboxes can be ticked and we need to preserve that we can store it as an array. Note that you can only store string in localStorage so you would need to convert the array to string and vice versa.

On any checkbox value changed we can call the function below that will set the localstorage

function checkboxChanged(e) {
  //Get the id of all checked checkboxes and store them as array
  // You can do this in loop as well by setting common class on checkboxes
  var c = []
    if(document.getElementById('checkbox1').checked) {
    c.push('checkbox1');
  }
  if(document.getElementById('checkbox2').checked) {
    c.push('checkbox2');
  }

  localStorage['test'] = c.toString();
}

Then you can just call the function below on document load

function checkOnLocalStorage() {
  if(!localStorage['test']) return;
  var checked = localStorage['test'].split(',');
  checked.map((id) => {
    document.getElementById(id).checked=true;
  })
}