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) ：