如果被用户选中，如何保持复选框选中，如果用户取消选中，即使在页面刷新后，如何保持未选中？(jquery & localStorage)

Question

我尝试使用此代码来做到这一点，但没有成功。有帮助吗？

$(function(){
    if (jQuery("#dtype:checked").val()==1) {
        localStorage.checked = true;
        //do something
    } else {
        localStorage.checked = false;
        //do something
    }
    ('#dtype').checked = localStorage.checked;
});

Answer 1

1. jQuery("#dtype:checked").val()==1)始终返回值，无论是否检查。正确的比较是使用其中之一：

   • $('#dtype').is(':checked')
   • $('#dtype').prop('checked')
   • $('#dtype:checked').length == 1

2. $('#dtype').checked这是错误的语法。您可能会因为在纯JS或jQuery中做而感到困惑。请参阅下面：

   • js：document.getElementById('dtype'(。检查
   • jQuery：$('＃dtype'(。prop('checked'(

3. localstorage只能保存String类型，您无法将其保存为布尔或整数等。localStorage.checked = true;始终会产生string" True"不 boolean" true"。记住基本"true" !== true

4. 附加信息：我们可以使用以下方式检查/取消选中：

   • 检查：$('#dtype').prop('checked', true);或$('#dtype').prop('checked', 1);
   • uncheck：$('#dtype').prop('checked', false);或$('#dtype').prop('checked', 0);

注意：我们可以使用 Number()强迫我们的localstorage字符串成为整数，以使其更简单

请参阅演示：http：//jsbin.com/vigerohebi/1/edit?html,console，output

<input type="checkbox" id="dtype"><br>
<button>delete localstorage</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
    //initial
    console.log(localStorage.checked);
    $("#dtype").prop('checked', Number(localStorage.checked));
    //onchange
    $("#dtype").change(function(){
        if($(this).prop('checked')){
            localStorage.checked = 1;
            //do something
            console.log('checked');
        }else{
            localStorage.checked = 0;
            //do something
            console.log('unchecked');
        }
        console.log(localStorage.checked);
    });
    //delete localStorage
    $('button').click(function(){
        window.localStorage.removeItem('checked');
    });
});
</script>

Answer 2

，如果浏览器支持并在页面加载或文档中，可以在会话存储中设置检查项目

  if (window.sessionStorage) {
    sessionStorage.setItem("checkedvalue", checkedvalues.selector);
  }
    $(document).ready(function () {
        //Retrieves the session storage for checked items
        var newcheck = sessionStorage.getItem("checkedvalue");
        $(newcheck).trigger("click");
    });