使用html5web存储做批量更改

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

HTML5 提供了两种在客户端存储数据的新方法：
localStorage – 没有时间限制的数据存储
sessionStorage – 针对一个 session 的数据存储
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
这里我们主要说的是localStorage

在做批量删除或者更新的时候我们首先需要在页面中获取需要查询是否有这个参数,如果有的话需要先将字符串解析成json对象

var finance_keys = JSON.parse(localStorage.getItem('finance_keys'));
finance_keys = finance_keys ? finance_keys:{};

在我们单击checkbox的时候需要记住当前点击的如果删除的话需要从本地存储中删除,注意这里的JSON.stringify()用于从一个对象解析出字符串

    $("input[name='id[]']").each(function(i,v){
        $(this).on('click',function(){
            if($(this)[0].checked==false){
            //删除取消的checkbox
                delete finance_keys[v.value];
            }else{
                finance_keys[v.value] = v.value
            }
            //存储finace_keys
            localStorage.setItem('finance_keys',JSON.stringify(finance_keys));
        })
    });

全选按钮

$(".select-on-check-all").on('click',function(){
        $("input[name='id[]']").each(function(i,v){
            if ($(this)[0].checked==false) {
                finance_keys[v.value] = v.value
            }else{
                delete finance_keys[v.value];
            }
            localStorage.setItem('finance_keys',JSON.stringify(finance_keys));
        });
    });

然后我们可能需要记住checkbox的状态
这时候可以用for循环来做

for (i in finance_keys) {
        $("#grid table tbody tr").each(function() {
            var checkbox_keys = $(this).children("td").children("input").val();
            if (finance_keys[i] == checkbox_keys) {
                $(this).children('td').children('input').attr('checked', true)
            }
        });
    }

批量确认按钮

$("#multiple_finance").on("click",function() {
        if (JSON.parse(localStorage.getItem('finance_keys').length > 0)) {
            var t = JSON.parse(localStorage.getItem('finance_keys'));
            var x;
            var txt="";
            for (x in t){
                txt += ',' + t[x];
            }
            var url = "/text.php?r=text%2Ftext%2Ftext&keys=" + txt;
            $(this).attr({href: url,"data-url": url});
            finance_keys = {};
            localStorage.setItem('finance_keys',JSON.stringify(finance_keys));
        } else {
            alert("请选择需要处理的订单~");
        }
    });