LOCAL STORAGE CHECKBOX

by ian_smithz

HTML

<input type='checkbox' data-store="checkbox1" />
<input type='checkbox' data-store="checkbox2" />
<input type='checkbox' data-store="checkbox3" />
<input type='checkbox' data-store="checkbox4" />
<input type='checkbox' data-store="checkbox5" />

JavaScript

(function() {
    var boxes = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        if (box.hasAttribute("data-store")) {
            setupBox(box);
        }
    }
    
    function setupBox(box) {
        var storageId = box.getAttribute("data-store");
        var oldVal    = localStorage.getItem(storageId);
        console.log(oldVal);
        box.checked = oldVal === "true" ? true : false;
        
        box.addEventListener("change", function() {
            localStorage.setItem(storageId, this.checked); 
        });
    }
})();