Javascript 使用localStorage在页面刷新时检索以前选中的复选框

我有一个html代码，其中复选框被选中，单击一个按钮，复选框的值将通过一个函数发送。当用户选中复选框时，相应的儿童复选框也被选中。如果我刷新页面，我希望检索以前选中的复选框。我尝试使用localStorage存储复选框值

localStorage.setItem("check", check);

然后在另一个函数中，尝试通过执行

    localStorage.getItem("check");
        if(check){
        $("input[name='favorites']").attr("checked", "checked");
$(check)
        .closest('li')
        .find('input:checkbox')
            .prop('checked', $(this).prop('checked') );
}

但这是行不通的。我只需要检索以前在页面刷新时选中的复选框

我的完整代码与演示

html

<ul class="test_ex">
    <li>
        <input type="checkbox" id="chckBox" class="parent" /> <a class="ref">Fruits</a>

        <ul class="example">
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>

            </li>
            <li>
                <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>

            </li>
        </ul>
        <ul class="test_ex_sample">
            <li>
                <input type="checkbox" id="chckBox" class="parent" /> <a class="ref">Birds</a>

                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>

                    </li>
                    <li>
                        <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>

                    </li>
                </ul>
                <ul class="example">
                    <li>
                        <input type="checkbox" id="chckBox" class="parent" /> <a class="ref"> Food </a>

                        <ul class="example">
                            <li>
                                <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<input type="button" id="testB" value="OK" />

在执行下面的get时，将localStorage分配给一个变量

var check = localStorage.getItem("check");

编辑：

         $(function() {
// Clicking on an <input:checkbox> should check any children checkboxes automatically
$('input:checkbox').change( fnTest );

// Clicking the OK button should run submit(), pop up displays all checked boxes
$('#testB').click( submit );

display();
    });


    function fnTest(e) {
   // Set all child checkboxes to the same value
    alert($(this).attr("id"));
     localStorage.setItem("prevChecked",$(this).attr("id"));
     localStorage.setItem("checkedState",$(this).prop('checked'));
   $(this)
    .closest('li')
    .find('input:checkbox')
        .prop('checked', $(this).prop('checked') );
 }


function submit(check) {
// When you click OK, dipslay the label for each checkbox
 var checked = [];
$('input:checkbox:checked').each(function() {
    //localStorage.setItem("prevChecked",check);
    checked.push( $(this).next('a').text() );
});
alert("You have selected:\n\n - " + checked.join("\n - ") );
}
    function display(){
     if(localStorage.getItem("checkedState")!="false")
    {
    var test=localStorage.getItem("prevChecked");
   alert(test);
    alert($("#"+test).closest('li').html());
    $("#"+test).closest('li')
    .find('input:checkbox')
        .prop('checked', localStorage.getItem("checkedState") );
        }
    }

$（函数（）{
//单击应自动选中所有子项复选框
$（'input:checkbox'）。更改（fnTest）；
//单击OK按钮应运行submit（），弹出窗口显示所有复选框
$（'#testB'）。单击（提交）；
显示（）；
});
功能测试（e）{
//将所有子复选框设置为相同的值
警报（$（this.attr（“id”））；
localStorage.setItem（“prevChecked”，$（this.attr（“id”）；
setItem（“checkedState”，$（this.prop（“checked”）；
$（本）
.最近的（'li'）
.find（'输入：复选框'）
.prop（'checked'，$（this）.prop（'checked'）；
}
功能提交（检查）{
//单击“确定”后，单击每个复选框的标签
检查的var=[]；
$（'input:checkbox:checked'）。每个（函数（）{
//setItem（“prevChecked”，check）；
选中.push（$（this.next（'a'）.text（））；
});
警报（“您已选择：\n\n-”+选中。加入（“\n-”））；
}
函数显示（）{
if（localStorage.getItem（“checkedState”）！=“false”）
{
var test=localStorage.getItem（“prevChecked”）；
警报（测试）；
警报（$（“#“+test）.closest（'li'）.html（））；
$（“#”+测试）。最近（'li'））
.find（'输入：复选框'）
.prop（'checked'，localStorage.getItem（“checkedState”）；
}
}

链接到您更新的小提琴：
尝试更改此代码，看看它是否适合您：

$(function() {
  // Clicking on an <input:checkbox> should check any children checkboxes automatically
  $('.ref').each(function(){
    var $t = $(this);
    $t.siblings('input').attr('data-name',$t.text());
  });

  $('input:checkbox').change( fnTest );

  // Clicking the OK button should run submit(), pop up displays all checked boxes
  $('#testB').click( submit );

  display();
});

function fnTest(e) {
  // Set all child checkboxes to the same value
  $(this)
    .closest('li')
    .find('input:checkbox')
        .prop('checked', $(this).prop('checked') );
}

function submit(check) {
  // When you click OK, dipslay the label for each checkbox
  var checked = [];
  $('input:checked').each(function() {
     checked.push( $(this).attr('data-name'));
  });
  alert("You have selected:\n\n - " + checked.join("\n - ") );
  localStorage.setItem("prevChecked",checked.join('|'));
}

function display(){
  var test=localStorage.getItem("prevChecked");
  alert(test);
  var results = test.split('|');
  for (var r=0, len=results.length; r<len; r++ ) {
    $('input[data-name="'+results[r]+'"]').prop('checked', true);
  }
}

$（函数（）{
//单击应自动选中所有子项复选框
$（'.ref'）。每个（函数（）{
var$t=$（本）；
$t.sides（'input'）.attr（'data-name'，$t.text（））；
});
$（'input:checkbox'）。更改（fnTest）；
//单击OK按钮应运行submit（），弹出窗口显示所有复选框
$（'#testB'）。单击（提交）；
显示（）；
});
功能测试（e）{
//将所有子复选框设置为相同的值
$（本）
.最近的（'li'）
.find（'输入：复选框'）
.prop（'checked'，$（this）.prop（'checked'）；
}
功能提交（检查）{
//单击“确定”后，单击每个复选框的标签
检查的var=[]；
$（'input:checked'）。每个（函数（）{
选中.push（$（this.attr（'data-name'））；
});
警报（“您已选择：\n\n-”+选中。加入（“\n-”））；
localStorage.setItem（“prevChecked”，checked.join（“|”）；
}
函数显示（）{
var test=localStorage.getItem（“prevChecked”）；
警报（测试）；
var结果=测试分割（“|”）；
对于（var r=0，len=results.length；rFYI:ID在页面上应该是唯一的。
ID=“chckBox”
只能使用一次！尝试更改为类，或者，如果需要单独获取它们，为每个元素创建唯一的ID。但是我没有使用任何类或ID将它们存储在localStorage中，我只是发送选中的值。我没有说你是…因此仅供参考。如果你没有使用ID，请将其删除！你能显示吗使用localStorage解决方案编写代码？这可能与
var check=localStorage.getItem（“check”）；
@Gary sir:这是演示localStorage的提琴。运行它选中一些复选框单击“确定”，然后再次运行它。它发出对象对象警报，但不检查框名结果没有任何变化：（查看上面的fiddle链接。已更新fiddle中的ur代码sir：此链接与我的fiddle相同，先生……这是您的代码。但我无法为每个字段提供数据名称，因为名称是动态生成的：（你没有在问题的任何地方指定这个。我只能看问题中的内容。由什么动态生成？我不知道html代码会有变化。很抱歉。它只是基于某个db树生成的一个树。好吧，你遇到的问题是你试图在localStorage中存储一个jquery对象。这不正确。）sn不起作用。您需要一个可以存储的字符串值。您可以尝试使用文本值，但它需要更复杂的jQuery才能达到相同的效果。
$(function() {
  // Clicking on an <input:checkbox> should check any children checkboxes automatically
  $('.ref').each(function(){
    var $t = $(this);
    $t.siblings('input').attr('data-name',$t.text());
  });

  $('input:checkbox').change( fnTest );

  // Clicking the OK button should run submit(), pop up displays all checked boxes
  $('#testB').click( submit );

  display();
});

function fnTest(e) {
  // Set all child checkboxes to the same value
  $(this)
    .closest('li')
    .find('input:checkbox')
        .prop('checked', $(this).prop('checked') );
}

function submit(check) {
  // When you click OK, dipslay the label for each checkbox
  var checked = [];
  $('input:checked').each(function() {
     checked.push( $(this).attr('data-name'));
  });
  alert("You have selected:\n\n - " + checked.join("\n - ") );
  localStorage.setItem("prevChecked",checked.join('|'));
}

function display(){
  var test=localStorage.getItem("prevChecked");
  alert(test);
  var results = test.split('|');
  for (var r=0, len=results.length; r<len; r++ ) {
    $('input[data-name="'+results[r]+'"]').prop('checked', true);
  }
}