实现checkbox 翻页后，仍保持选中状态

这几天工作中需要用到这功能，因为我做后端的，所以和往常一样，前端的东西我都会去网上搜有木有现成的代码。

一搜，结果都是乱乱的，就算有也是把选中的数据发到后端处理。我想，这个可以在前端用localstorage来存储的呀。

所以自己打算写一个，虽然我产专业的前端，但还是略知一二。

使用的技术

localStorage.setItem(key,val);
localStorage.getItem(key);

1、首先我测试的html如下

<input type="checkbox" value="1" name="ids" οnclick="save_storage(this)"/>小明
<input type="checkbox" value="2" name="ids" οnclick="save_storage(this)"/>小李
<input type="checkbox" value="3" name="ids" οnclick="save_storage(this)"/>小王

2、接下来，我要写一个选中时存value，不选时移除value的js方法

  //存或减选中的值
    function save_storage(obj) {
        var val=$(obj).val();
        var select_ids=localStorage.getItem('select_ids');
        if($(obj).prop("checked")){
            //选中时，加上里面的值
            if(select_ids!=null){
                if(select_ids.indexOf(val)==-1){
                    localStorage.setItem('select_ids',select_ids+','+val);
                }
            }else{
                localStorage.setItem('select_ids',val);
            }
        }else{
            //不选中是去掉里面的值
            if(select_ids.indexOf(val)!=-1){
                var temp=select_ids.replace(','+val,'');
                localStorage.setItem('select_ids',temp);
            }
        }
    }

3、接下来，再写一个每一次翻页（刷新）时，选中checkbox的js方法

//设置选中
    function set_select() {
        var select_ids=localStorage.getItem('select_ids');
        $("input[name='ids']").each(function (i,o) {
            var val=$(o).val();
            if(select_ids.indexOf(val)!=-1){
                $(o).prop("checked",true);
            }
        });
    }

4、使用ready方法设置每次翻页时（刷新），都执行该方法

 $(document).ready(function () {
        set_select();
    });

5、好了，总算大功告成。