Question

我无法存储复选框状态。我尝试将状态存储在本地存储中，但在页面刷新后，勾选从复选框中消失。

<form>
    <input type="checkbox" id="checkbox1" onchange = "save();">Tick the check box</input>
</form>
<script>
    function save() {
        var checkbox = document.getElementById('checkbox1');
        localStorage.setItem('check', checkbox.checked);
    }

    window.onload()=function() {    
        var checked = JSON.parse(localStorage.getItem('check'));
        document.getElementById("checkbox1").checked = checked;
    }
<script>

Answer 1

使用window.onload()，您可以调用函数，而不是声明它。变化

window.onload()=function(){

到

window.onload = function() {

如果你使用jQuery，这是一个更好的方法：

<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Tick the check box</label>

$(function()
{
    $("#checkbox1").change(function()
    {
        localStorage.check = this.checked;
    });
    var isChecked = localStorage.check ? localStorage.check == "true" : false;
    $("#checkbox1").prop("checked", isChecked);
});

jQuery有一个名为.ready的函数。您不需要解析localStorage.check，因为它的值不是JSON对象。 localStorage中的所有内容都存储为字符串，localStorage.check == "true"将为您提供一个真正的布尔值。如果用户没有点击该复选框，您还需要一个默认值false。 <input>text</input>语法无效。如果您想要＆＃34;可点击＆＃34;请使用<label>文本。

编辑：对于表单中的所有复选框：

<form id="myForm" method="post" action="some.php">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Tick the check box</label>
    <br />
    <input type="checkbox" id="checkbox2" />
    <label for="checkbox2">Tick the check box</label>
    <br />
    <input type="checkbox" id="checkbox3" />
    <label for="checkbox3">Tick the check box</label>
</form>

$(function()
{
    $("#myForm input[type='checkbox']").change(function()
    {
        localStorage[$(this).attr("id")] = this.checked;
    });
    $("#myForm input[type='checkbox']").each(function()
    {
        var val = localStorage[$(this).attr("id")];
        var isChecked = val !== undefined ? val == "true" : false;
        $(this).prop("checked", isChecked);
    });
});

Answer 2

两个变化：

将window.onload() =更改为window.onload =。
每当复选框使用save()更改值时，请务必致电.addEventListener("change", save)。

//Our checkbox
var checkbox = document.getElementById('checkbox1');

//This function saves the checkbox value:
function save() {
    localStorage.setItem('check', checkbox.checked);
}

//This function reloads the checkbox like how it was from localStorage:
window.onload = function() {    
    var checked = JSON.parse(localStorage.getItem('check'));
    checkbox.checked = checked;
}

//Remember to save whenever the checkbox changes:
checkbox.addEventListener("change", save);

<form>
<input type="checkbox" id="checkbox1" onchange = "save();">Tick the check box</input>
</form>

Answer 3

问题的其他解决方案（纠正window.load）似乎很好（另请参阅Mozilla docs）：
如果你想做JSON.parse（）来恢复数据，那么在存储之前以JSON 编码数据似乎更清晰。所以你可以做到
```
localStorage.setItem("check", JSON.stringify(checkbox.checked));
```
而不是
```
localStorage.setItem('check', checkbox.checked);
```
如果您只想为浏览器会话持久化（您说“刷新页面时”），则可以使用sessionStorage。浏览器结束后会清除此项，但在浏览器处于活动状态时会保存。由于localStorage apparently is loaded whenever the browser starts（可以累计许多网站），这会在重新加载之间保留数据，但不会使用户的计算机混乱。

在本地存储中刷新页面时，我无法存储复选框状态？

3 个答案: