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