localStorage实现按钮点击禁用

HTML5 提供了两种在客户端存储数据的新方法：

1.localStorage - 没有时间限制的数据存储
2.sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。而关于他们三者之间的相同和区别这边就不详述了。

突然说起localStorage是有原因的，上周接到项目有一个需求就是按钮被点击一次后禁用，想了想localStorage出来这么久了还没玩过，就用起来吧，也当试验下，做了个小demo

HTML

<input data-num="" class="clickMe" type="button" value="点我">

<input data-num="" class="clickMe" type="button" value="点我">

<input data-num="" class="clickMe" type="button" value="点我">

JS

(function(){
    function Disabled(){
        var dataNum=[];
        for(var i = 0, len = clickMe.length; i < len; i++){
            //保存自定义属性的值
            dataNum[i] = clickMe[i].dataset.num == 0? 0: 1;
        }
        
        if(window.localStorage){
            //存
            localStorage.setItem("num",dataNum);
        }
        
    }
    var clickMe=document.querySelectorAll(".clickMe");
    
    for(var i = 0, len = clickMe.length; i < len; i++){
        //预设自定义属性的值
        clickMe[i].dataset.num=0;
        clickMe[i].addEventListener("click", function(e){ 
            //监听click事件，改变自定义属性的值、dom状态
            this.dataset.num=1;
            this.setAttribute("disabled","true");
            //实时存储
            Disabled();
        }, false)
    }
    //取
    var strStoreData = localStorage.getItem("num");
    if (strStoreData) {
        //遍历数组
        strStoreData.split(",").forEach(function(item, index,array) {
            if (item == 1) {
                //根据自定义属性值执行click实现本地存储循环实现效果
                clickMe[index].click();
            }
        }); 
    }
})()

(function(){        
    var clickMe=document.querySelectorAll(".clickMe");
    for(var i = 0, len = clickMe.length; i < len; i++){
       clickMe[i].addEventListener("click", (function(index){                    
            return  function(){                
                this.setAttribute("disabled","true");
                localStorage.setItem("disabled"+index,true);
            }
        })(i),false);
        if(localStorage.getItem("disabled"+i)!=null){
             clickMe[i].setAttribute("disabled",localStorage.getItem("disabled"+i));
        } 
    };            
})()

上面两段都JS代码都能实现功能，第一段有了一种封装，更易于扩展，第二段只实现了最基本的功能，不过第二种写法得注意for循环中的闭包，说到底localStorage就是个存和取，更多高端玩法需要我们自己去探究。