localStorage how to save a checkbox

Question

I want to save a checkbox with localstorage. So that when i have checked the box and I close the browser and i re-open it, it will still be checked. right now if i click on

Answer 1

You can also retrieve the status of your checkbox this way:

var selCheck = document.getElementById("checkOne");
selCheck.checked = (localStorage.getItem("34_chkOne")=="true");

Obviously,

"checkOne" is the id of the checkbox. "34_chkOne" is the name of the local storage variable.

To store the value, you simply use

var selCheck = document.getElementById("checkOne");
localStorage.setItem("34_chkOne", selCheck.checked);

and, as said above, a variable of type string will be stored.

Answer 2

1). Because boolean true is not equal to string "true". So comparison checked == true is always false, and checkbox never gets checked.

Instead try this:

var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
if (checked == true) {
    document.getElementById("checkbox1zaal1").checked = true;
}

And remember whatever you store in localStorage is always a string, and only a string. That's why when you save something more complex then primitive value (for example some object) make sure to use JSON.stringify on it first.

When you retrieve the value from localStorage you should convert it back to it's corresponding javascript type.

In general load function can also be improved:

function load(){    
    var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
    document.getElementById("checkbox1zaal1").checked = checked;
}

2). Another problem will come up once you try to uncheck checkbox. You are not handling it currently, so change save function to this one:

function save(){
    var checkbox = document.getElementById('checkbox1zaal1');
    localStorage.setItem('checkbox1zaal1', checkbox.checked);
}

Demo: http://jsfiddle.net/Lwxoeyyp/1/

Answer 3

am using this jquery code and is working with me better

$(function() {
    var sound_t_s_data = localStorage.getItem("sound_t_s");
    if (sound_t_s_data == "yes") {
        $("#sound_t").prop('checked', true);
    }
    else if(sound_t_s_data == "no"){
        $("#sound_t").prop('checked', false);
    }
});
$("#sound_t").click(function() {
    if ($(this).is(":checked")) {
        localStorage.setItem("sound_t_s", "yes");
    } else {
        localStorage.setItem("sound_t_s", "no");            
    }
});

And if you want to us it in function use like this

//Play Audio
const s_a = new Audio("audio/s_a.mp3");
$( "#s_r" ).click(function() {
    if ($('#sound_t').is(':checked')) {
        s_a.play()
    }
});

Answer 4

The problem is that you are storing value as "true" in localStorage which is a string format, Now at time of loading the page value is retrieved as string and you are comparing that String "true" with boolean true. This will return false. One small change as

if (checked == "true")

now this should work.