Question

我想使用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>

感谢任何建议！

Answer 1

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/

Answer 2

问题在于您将值"true"存储在localStorage中，这是一种字符串格式。现在在加载时，页面值被检索为字符串，您正在比较该字符串＆＃34; true＆＃34 ;用布尔值true。这将返回false。

的一个小变化

if (checked == "true")

现在这应该有效。

Answer 3

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

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

显然，

＆＃34; checkOne＆＃34;是复选框的ID。＆＃34; 34_chkOne＆＃34;是本地存储变量的名称。

要存储该值，只需使用

即可

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

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

Answer 4

我正在使用此jquery代码，并且可以更好地与我合作

FacesContext ctx = FacesContext.getCurrentInstance();
HttpServletRequest req = (HttpServletRequest) ctx.getExternalContext().getRequest();
HttpServletResponse resp = (HttpServletResponse) ctx.getExternalContext().getResponse();

ctx.responseComplete();
req.authenticate(resp);

event.handled();

如果您希望我们在功能上使用它，就像这样

$(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");            
    }
});

localStorage如何保存复选框

4 个答案:

演示：http://jsfiddle.net/Lwxoeyyp/1/