js-記住之前選中的checkbox

背景

laravel框架下的分頁，若不做處理，點擊下一頁後，不會記住之
前頁面選擇的內容　

開始

代碼中做了註釋

<input type="checkbox" value="{{ $oWechatRecord->id }}" data-am-ucheck class="mycheckbox">

//js部分
/**
 * 將cookie中保存的數據與當前頁面數據對比、勾選
 */
$(document).ready(function(){
    var ids = getCookie("selectedId");
    //console.log(ids);  |12|13|14|
    if (ids != ""){
        var str=ids.substring(1,ids.length-1);
        //console.log(str);  12|13|14
        var arry=str.split('|');//整理成數組格式
        //console.log(arry); [12,13,14]
        $('.mycheckbox').each(function(i,item){//i從0-14；item是這個input type='checkbox'框
            //console.log(item);
            var uid=parseInt($(item).val());
            for(var i=0;i<arry.length;i++){//循環判斷，並勾選
                var did=parseInt(arry[i]);
                if(uid==did){
                    $(item)[0].checked=true;
                }
            }
        })
    }
});

/**
 * 獲取cookie中的內容
 * @param name
 * @returns {*}
 * @constructor
 */
function getCookie(name) {
    if (document.cookie.length > 0) {
        //console.log(document.cookie);
        var start_position = document.cookie.indexOf(name + "=");//document.cookie獲取當前網站下的cookie;indexOf() 方法返回某個指定的字符串值在字符串中首次出現的位置。
        //console.log(start_position);
        if (start_position != -1) {//等於-1是該cookie不存在
            start_position = start_position + name.length + 1;
            var end_position = document.cookie.indexOf(";", start_position);
            if (end_position == -1) end_position = document.cookie.length;
            if (document.cookie.substring(start_position, end_position) == '|') {//需要判斷下cookie中是否有selectedId=|;這種情況:是勾選後又取消了所有勾選數據
                return "";
            } else {
                return document.cookie.substring(start_position, end_position);
            }
        }
    }
    return "";
}

/**
 * 點擊多選框
 */
$('.mycheckbox').click(function(){
    if (this.checked) {
        var count = $("td input:checkbox:checked").length;
        if (count == $("td input:checkbox").length) {
            $("th input:checkbox").prop("checked", true);//prop() 方法設置或返回被選元素的屬性和值。
            //prop和attr區別可看這篇博文 https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
        }
    } else {
        $("th input:checkbox").prop('checked', false);
    }
    //點擊 將存儲到cookie中
    var uid=$(this).val();
    setSelectedId(this,uid)
});

function setSelectedId(e, uid) {
    if (e.checked) {
        addCookie(uid)
    } else {
        removeCookie(uid)
    }
}
function addCookie(uid) {
    var selectedId = getCookie("selectedId");
    if (selectedId == "") selectedId = "|";
    if (selectedId.indexOf("|" + uid + "|") == -1) {
        //若未找到|15|則新增
        selectedId += uid + "|";
        setCookie("selectedId", selectedId);
    }
}
function removeCookie(uid) {
    var selectedId = getCookie("selectedId");
    var reg = new RegExp("\\|" + uid + "\\|");//RegExp 對象表示正則表達式，對字符串執行模式匹配
    //console.log(reg);//  /\|15\|/
    if (reg.test(selectedId)) {//匹配到數據
        selectedId = selectedId.replace(reg, "|");//替換
        setCookie("selectedId", selectedId);
    }
}

function setCookie(name, value) {
    document.cookie = name + "=" + value;
}

//刪除整個cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    // 這裏需要判斷一下cookie是否存在
    var selectedId = getCookie(name);
    if (selectedId != ''){
        document.cookie = name + "=" + selectedId + ";expires=" + exp.toUTCString();
    }
}

列表頁面：
console.log(document.cookie) ：