Menu
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 the checkbox and i press the save button it doesn't save the checkbox.
how can i achieve this?
this is my code:
<script>
function save(){
var checkbox = document.getElementById('checkbox1zaal1');
if(document.getElementById('checkbox1zaal1').checked) {
localStorage.setItem('checkbox1zaal1', true);
}
}
function load(){
var checked = localStorage.getItem('checkbox1zaal1');
if (checked == true) {
document.getElementById("checkbox1zaal1").setAttribute('checked','checked');
}
}
function wis(){
location.reload();
localStorage.clear()
}
</script>
<body onload="load()">
<input type="button" id="ReserveerButton1" value="save" onclick="save()"/>
<input type="button" id="Wisbutton1" value="delete" onclick="wis()"/>
<input type="checkbox" id="checkbox1zaal1">1e film van de dag</input>
</body>
thanks for any advice!
384
"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.
.setItem () converts the value to a string. Note also that it doesn't make sense to have the if test in your save function, because it only saves the value when the checkbox is checked - so if the previously saved value is true and then the checkbox unchecked and Save clicked again the saved value will still be true.
Two issues that come to mind: 1. Maybe you should save the checkbox state for both true and false values. 2. Perhaps the browser is clearing the localStorage according to cookie settings; This is true on Firefox -- if you have it set to clear cookies on browser exit, it also clears the localStorage for the site (ie, shared permissions). 1).
2. Perhaps the browser is clearing the localStorage according to cookie settings; This is true on Firefox -- if you have it set to clear cookies on browser exit, it also clears the localStorage for the site (ie, shared permissions). 1). Because boolean true is not equal to string "true".
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);
}
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
