如果用户选中了如何保持复选框，如果用户在页面刷新后取消选中，则检查未选中？ （jquery＆amp; 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

如果浏览器支持，则可以在会话存储中设置选中的项目，并在页面加载或文档准备就绪时检索它

  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");
    });

Answer 2

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

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

2. $('#dtype').checked这是用于比较的错误语法。你可能会对在纯粹的js或jquery中做的事情感到困惑。见下文：

   • js：document.getElementById（＆＃39; dtype＆＃39;）。已检查
   • jquery：$（＆＃39;＃dtype＆＃39;）。prop（＆＃39; checked＆＃39;）

3. localStorage只能保存String类型，不能将其保存为布尔值或整数等。localStorage.checked = true;将始终生成string＆＃34; true＆＃34;不是boolean＆＃34;是＆＃34;。记住基本的"true" !== true

4. 其他信息：我们可以使用以下方法检查/取消选中jquery：

   • 检查：$('#dtype').prop('checked', true);或$('#dtype').prop('checked', 1);
   • 取消选中：$('#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>