應用場景

在開發“傳送簡訊驗證”功能時候，要解決一個問題，防止惡意或頻繁傳送簡訊驗證碼問題。一般原理是“當點選傳送按鈕時，傳送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>