javascript localStorage 如何保存复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26628812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
localStorage how to save a checkbox
提问by snipsnapper
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.
我想用 localstorage 保存一个复选框。因此，当我选中该框并关闭浏览器并重新打开它时，它仍将被选中。现在，如果我单击复选框并按下保存按钮，它不会保存复选框。
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!
感谢您的任何建议！
回答by dfsq
1).Because boolean trueis not equal to string "true". So comparison checked == trueis always false, and checkbox never gets checked.
1）。因为 booleantrue不等于 string "true"。所以比较checked == true总是false，并且复选框永远不会被选中。
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 alwaysa 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.stringifyon it first.
请记住，您在 localStorage 中存储的任何内容始终是一个字符串，并且只是一个字符串。这就是为什么当你保存一些比原始值（例如某个对象）更复杂的东西时JSON.stringify，一定要先在它上面使用。
When you retrieve the value from localStorage you should convert it back to it's corresponding javascript type.
当您从 localStorage 检索值时，您应该将其转换回相应的 javascript 类型。
In general loadfunction can also be improved:
总的来说load功能还可以改进：
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 savefunction to this one:
2）。一旦您尝试取消选中复选框，就会出现另一个问题。您当前没有处理它，因此将save功能更改为：
function save(){
var checkbox = document.getElementById('checkbox1zaal1');
localStorage.setItem('checkbox1zaal1', checkbox.checked);
}
Demo: http://jsfiddle.net/Lwxoeyyp/1/
演示：http: //jsfiddle.net/Lwxoeyyp/1/
回答by Swapnil Motewar
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
问题是您将值存储 "true"在 localStorage 中，这是一种字符串格式，现在在加载页面时将值作为字符串检索，并且您正在将该字符串“true”与布尔值 true 进行比较。这将返回 false。一个小的改变作为
if (checked == "true")
now this should work.
现在这应该工作。
回答by Mikey
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.
“checkOne”是复选框的 id。“34_chkOne”是本地存储变量的名称。
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 stringwill be stored.
并且，如上所述，将存储字符串类型的变量。
回答by Mohamed Slimane
am using this jquery code and is working with me better
我正在使用这个 jquery 代码并且更好地与我合作
$(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()
}
});
