localStorage如何保存复选框

localStorage how to save a checkbox

本文关键字：保存 复选框 何保存 localStorage      更新时间：2023-09-26

我想用localstorage保存一个复选框。这样，当我选中复选框，关闭浏览器并重新打开它时，它仍然会被选中。现在，如果我点击复选框并按下保存按钮，它不会保存复选框。

我怎样才能做到这一点？

这是我的代码：

<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>

谢谢你的建议！

1）因为布尔值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类型。

一般load的功能也可以改进：

function 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/

问题是，您将值存储为字符串格式的localStorage中的"true"。现在，在加载时，页面值将以字符串形式检索，并将字符串"true"与布尔值true进行比较。这将返回false。的一个小变化

if (checked == "true")

现在这应该行得通了。

您还可以通过以下方式检索复选框的状态：

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

显然，

"checkOne"是复选框的id。"34_chkOne"是本地存储变量的名称。

要存储价值，只需使用

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

并且，如上所述，将存储string类型的变量。

我正在使用这个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");            
    }
});

如果你想让我们在功能上使用它，比如这个

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