js实现页面复选框checkbox记忆功能

1. 需求：在页面中复选框点击选中后，页面刷新或者关闭重新打开，选中的复选框依然是选中状态
2. 开发思路：建立一个数组存放被选中的checkbox的id，将数组放到cookie中存储，复选框选中则往数组中加一个id，取消选中则从数据中删除该id,页面加载时从cookie中取出数组，根据数组中存储的id将checkbox的value值等于id的设置为勾选状态，批量操作时将批量操作的id从数据中删除，单条记录提交成功后也从数组中删除id
3. html代码引用cookie.js：

<script type="text/javascript" src="${base}/assets/js/js.cookie.js?v=${rversion}"></script>
<div id="settle-batch">
    <input class="col-sm-1" name="all" id="all" type="checkbox" value=""/>全选
    <table>
        <tbody>
            <tr>
                <td>
                    <input name="fruit" type="checkbox" value="1"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input name="fruit" type="checkbox" value="2"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>

1. js代码

//存储选中的id,flag=true新增，flag=false删除
function setSettleChecks(settleId,flag) {
    //debugger;
    var settleChecksArr=Cookies.getJSON('settleChecks') || []
    if(flag && $.inArray(settleId,settleChecksArr)<0){
        settleChecksArr.push(settleId)
    }else if(!flag){
        settleChecksArr.splice($.inArray(settleId,settleChecksArr),1);
    }
    Cookies.set("settleChecks",settleChecksArr)
    console.log("settleChecks:"+Cookies.getJSON("settleChecks"));
}

//删除已经提交成功的id（批量操作时将批量操作的id从cookies中删除）
function deleteSettleChecksByIds(ids) {
    //debugger
    for(var i=0;i<ids.length;i++){
        setSettleChecks(ids[i],false);
    }
    $('input[name="fruit"]').each(function () {
        if($.inArray($(this).val(),ids)>-1){
            $(this).prop("checked",false);
        }
    })
}

//进入页面或者刷新页面时加载选中的checkbox
function loadSettleChecks() {
    var settleChecksArr=Cookies.getJSON('settleChecks') || [];
    var $fruits = $("input[name='fruit']");
    $fruits.each(function () {
        if($.inArray($(this).val(),settleChecksArr)>-1){
            $(this).prop("checked",true);
        }
    })
    //全选复选框设置选中或者不选中
    $("#all").prop("checked" , ($fruits.length == $fruits.filter(":checked").length &&  $fruits.length>0) ? true :false);
}

// 全选复选框点击事件
$('#settle-batch').on('click','#all',function () {
    $("input[name='fruit']").prop("checked", this.checked);
    $("input[name='fruit']").each(function () {
        setSettleChecks($(this).val(),this.checked);
    })
})

//checkbox点击事件
$(document).on('click',"input[name='fruit']",function () {
    setSettleChecks($(this).val(),$(this).is(':checked'));
})