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

I am unable to store the check box state when the page is refreshed in local Storage?

本文关键字：存储 复选框 状态 刷新      更新时间：2023-09-26

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

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

两个变化:

  1. 将window.onload() =改为window.onload =
  2. 当复选框的值改变为.addEventListener("change", save)时，记住调用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>

使用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>是无效的语法。如果你想要"可点击"的文本，使用<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);
    });
});

  1. 你的问题的其他解决方案(纠正window.load)似乎很好(也参见Mozilla文档):

  2. 如果你想做JSON.parse()来恢复数据，那么在JSON中编码数据在存储看起来更干净之前。你可以输入

    localStorage.setItem("check", JSON.stringify(checkbox.checked));
    不是

    localStorage.setItem('check', checkbox.checked);

  3. 如果你想要持久的浏览器会话(你说"当页面刷新")，你可以使用sessionStorage。在浏览器结束后清除，但在浏览器处于活动状态时保存。由于localStorage显然是在浏览器启动时加载的(这可能会增加许多站点)，这将在重新加载之间保留您的数据，但不会使用户的计算机混乱。

相关文章：