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

Question

我有一个 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" />

javascript

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


function fnTest(check) {
    // Set all child checkboxes to the same value
    $(check)
        .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() {
        checked.push( $(this).next('a').text() );
    });
    alert("You have selected:\n\n - " + checked.join("\n - ") );
}

Updated Fiddle

Answer 1

在执行这样的获取时将 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") );
        }
    }

链接到您更新的小提琴： http://jsfiddle.net/3a050r6r/36/

Answer 2

尝试更改此代码，看看它是否适合您：

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

更新 看到这个小提琴： http://jsfiddle.net/3a050r6r/6/