localStorage如何保存复选框 [英] localStorage how to save a checkbox
问题描述
我想用localstorage保存一个复选框。所以，当我检查框并关闭浏览器并重新打开它时，它仍然会被检查。现在，如果我点击复选框，并按下保存按钮，它不会保存复选框。
我该如何做到这一点？
这是我的代码：
< script>
function save（）{
var checkbox = document.getElementById（'checkbox1zaal1'）; （$ checkbox1zaal1'）。
if
函数load（）{
var checked = localStorage.getItem（'checkbox1zaal1'）;
if（checked == true）{
document.getElementById（checkbox1zaal1）。setAttribute（'checked'，'checked'）;
函数wis（）{
location.reload（）;
localStorage.clear（）
}
< / script>
< body onload =load（）>
< input type =buttonid =ReserveerButton1value =saveonclick =save（）/>
< input type =buttonid =Wisbutton1value =deleteonclick =wis（）/>
< input type =checkboxid =checkbox1zaal1> 1e film van de dag< / input>
< / body>
感谢您的任何建议！
true 不等于字符串true 。所以比较 checked == true 总是 false ，并且复选框永远不会被检查。
请尝试以下操作：
var checked = JSON.parse（localStorage.getItem（'checkbox1zaal1'）） ）;
if（checked == true）{
document.getElementById（checkbox1zaal1）。checked = true;
}
请记住，您在localStorage中存储的内容始终是 一个字符串，只有一个字符串。这就是为什么当你保存更复杂的东西时，原始值（例如某个对象）首先要确保首先使用 JSON.stringify 。
从localStorage中检索值时，应将其转换为相应的javascript类型。
$ b 通常 load
$ b
函数load（）{
var checked = JSON.parse （localStorage.getItem（ 'checkbox1zaal1'））;
document.getElementById（checkbox1zaal1）。checked = checked;
}
2）。另一个问题会出现一次您尝试取消选中复选框。您目前没有处理它，因此将 save 函数更改为这个函数：
function save（）{
var checkbox = document.getElementById（'checkbox1zaal1'）;
localStorage.setItem（'checkbox1zaal1'，checkbox.checked）;
}
演示： http://jsfiddle.net/Lwxoeyyp/1/
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!
解决方案 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/
这篇关于localStorage如何保存复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
