发送短信验证后，按钮倒计时，防止刷新倒计时失效

应用场景

在开发“发送短信验证”功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时”。如果就这样不对倒计时存储做处理，那么当刷新页面，会出现倒计时失效，按钮可点击。提供以下解决方案：

• 利用cookie存储倒计时

• 利用HTML5的localStorage 存储倒计时

利用cookie存储倒计时

发送成功后把剩余倒计时存储到cookie，当页面刷新时，检查cookie 是否还存储着剩余倒计时？，如果有，发送按钮则保持倒计时状态，不可点击，否则发送按钮可点击。

HTML代码

<input type="button" id="btn" disabled="disabled" value="获取验证码">

JQuery代码

<!--引入jquery.cookie.js 插件--><script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script><!--逻辑功能代码 --><script>    $(function(){                     if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒计时                    timekeeping();                }else{//cookie 没有倒计时                  $('#btn').attr("disabled", false);      }          function timekeeping(){        //把按钮设置为不可以点击        $('#btn').attr("disabled", true);        var interval=setInterval(function(){//每秒读取一次cookie          //从cookie 中读取剩余倒计时          total=$.cookie("total");          //在发送按钮显示剩余倒计时          $('#btn').val('请等待'+total+'秒');          //把剩余总倒计时减掉1          total--;              if(total==0){//剩余倒计时为零，则显示 重新发送，可点击          //清除定时器          clearInterval(interval);          //删除cookie          total=$.cookie("total",total, { expires: -1 });              //显示重新发送          $('#btn').val('重新发送');          //把发送按钮设置为可点击          $('#btn').attr("disabled", false);          }else{//剩余倒计时不为零              //重新写入总倒计时          $.cookie("total",total);          }            },1000);          }      //绑定发送按钮       $('#btn').click(function(event) {      /* Act on the event */      // alert($("#btn").val());      //校验手机号码      var phone=$('#phone').val();      var pre=/^[1][358][0-9]{9}$/;      if(phone==''){          layer.open({              content: '手机号码不能为空',              time: 2          });                return this;      }else{          var pre=/^[1][358][0-9]{9}$/;          if(!pre.test(phone)){            layer.open({                content: '手机号码格式有误！',                time: 2            });                        return this;          }      }      $.ajax({        url: '',//服务器发送短信        type: 'GET',        dataType: 'json',        data: {phone: phone},      })      .done(function(re) {            var str="发送短信验证码成功，请注意查看您的手机";            // console.log(re);            if(re){               $.cookie("total",60);               timekeeping();            }else{                            switch (re[0]) {                  case '160038':                                        str="短信验证码发送过频繁";                    break;                   case '160034':                                        str="号码黑名单";                    break;                   case '160000':                                        str="系统错误";                    break;                  case '000000':                                        str="发送成功";                    break;                  case '112300':                                        str="接收短信的手机号码为空";                    break;                    case '160040':                                        str="验证码超出发送上限";                    break;                  case '160042':                        str="号码格式有误";                    break;                                    default:                    str="发送验证码失败";                    break;                }            }                       layer.open({                  content: str,                  time: 2              });                 })      .fail(function() {        console.log("error");      })      .always(function() {        console.log("complete");      });          });    })</script>