Question

I am trying to create an options page for a Chrome extension. The first part sets the value in to local storage. Check for true and uncheck for false. The second part is supposed to update the check box if the user comes back at some other time and the settings will apply to the check box.

My problem is that the check box is never check when the user refreshes or closes the window and comes back, but the local storage will change to true or false. How do I make it so that the user can check the box and it will stay when the user returns at a later time or refresh esthe page.

    setStatus = document.getElementById('stat');
    setStatus.onclick = function() {
        if(document.getElementById('stat').checked) {
            localStorage.setItem('stat', "true");
        } else {
            localStorage.setItem('stat', "false");
        }
    }


getStstus = localStorage.getItem('stat');
    if (getStstus == "true") {
        console.log("its checked");
        document.getElementById("stat").checked;
    } else {
        console.log("its not checked");
    }

Answer 1

Changing:

document.getElementById("stat").checked;

To:

document.getElementById("stat").setAttribute('checked','checked');

Would fix this. Since when adding .checked, that actually just checks if the checkbox is check.

You can also just do:

document.getElementById("stat").checked=true;   

Which does the same thing.

---

Please note that you need to change the second document.getElementById("stat").checked.

getStstus = localStorage.getItem('stat');
    if (getStstus == "true") {
        console.log("its checked");
        document.getElementById("stat").setAttribute('checked','checked');
    } else {
        console.log("its not checked");
    }​

JsFiddle Example