jquery（zepto）儲存checkbox狀态

問題描述：

目前在做一個人員管理功能，要從使用者表裡面進行多選，最後将選中的使用者拼接為字元串傳回

（使用者也不是很多大概五千吧，不妙的地方在于，這是H5站點…..）

存在以下幾種情況，是以checkbox選擇必須儲存

（1）搜尋

（2）分頁

（3）頁面跳轉

其實都是初始化的問題吧=_=

讀取人員清單大概是這樣的流程

其實用的是zepto（因為采用了SUI架構），但我當jq寫的，無差别

查了一下有好幾種方法

1.cookie

2.localstorage

3.隐藏域

但是localstorage試了之後不成功（我沒學會），後來采用了在搜尋前儲存但一樣有點問題

于是我用了下面這種也許不是很聰明的方法

沒有用到隐藏域或localstorage

解決方案：

1.在js中建立倆全局變量

（1）數組selected，存選中的人員

（2）字元串users，人員清單（其實是selected用英文逗号拼接一下），友善在頁面間傳

同時，頁面初始化時判斷上個頁面傳過來的users是否為空，不為空的話把字元串轉為數組，存在selected裡面

selected=users.split(",");
           

2.input的value設為使用者id

<input  type="checkbox" name="checkbox" onclick="clickIt(this)" value="'+result.data.list[i].id+'">
           

3.每次點選checkbox，把id加到selected數組中，取消時将該id去除

function clickIt(checkbox){
        var $thisObj=$(checkbox);
        var v=$thisObj.val();
        if (checkbox.checked == true){
        //Action for checked
            if($.inArray(v,selected)==-1){
                selected.push(v);
            }
        }else{
        //Action for not checked
            for(var i=0;i<=selected.length-1;i++){
                if(sel[i]==v){
                    selected.splice(i,1);
                }
            }
        }

    }
           

4.每讀取新的一頁時，判斷是否有id與selected中重合，若有則設為選中

function reselect() {
    $("input[type='checkbox']").each(function(){
        var v=$(this).val();
        if ($.inArray(v,selected)!=-1){
            $(this).prop("checked",true);
        }
    });
}
           

5.跳轉時将selected拼接成字元串users，利用ajax傳回人員管理頁，如果要調回來，把這個字元串傳過來，

users=selected.join(",");
           

大概是這樣吧。

我其實非常擔憂安全性

可能用localstorage，session什麼的要好一點，但完全來不及去學了

參考：

[1]jq:翻頁時，儲存上頁多選框checkbox選中狀态來自 <https://www.cnblogs.com/echoppy/p/6689986.html>

[2]js數組與字元串的互相轉換來自 <https://www.cnblogs.com/LeoBoy/p/5899734.html>