vue簡訊驗證性能優化寫入localstorage中

平時我們在項目中進行註冊等的時候,會經常用到簡訊驗證的功能,但是現在現在很多簡訊驗證都是存在下麵幾個問題,例如簡訊驗證時間為60s的時候,

1. 當點擊完按鈕時,倒計時還沒到60s過完時,刷新瀏覽器,驗證碼按鈕又可以重新點擊

2.當點擊按鈕倒計時開始,例如在50s的時候我關閉了瀏覽器,過了5s後,我在打開,此時時間倒計時的時間應該是45s左右,但是當重新打開瀏覽器的時候,按鈕又可以重新點擊了

為瞭解決上面的兩個問題,就需要把時間都寫到localstorage裡面去,當打開頁面的時候,就去localstorage裡面去取,我這裡就貼上我的解決方法,因為前幾天有個vue的項目用到該方法,所以我這裡就寫個vue的方法出來吧

組件裡面的html代碼:

 <div class="mtui-cell__ft" @click="getCode">
          <button class="mtui-vcode-btn mtui-text-center" v-if="flag">獲取簡訊</button>
          <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩餘{{second}}s</button>
 </div>

重點來啦

在data裡面定義幾個需要用到的變數:

 second: 60,
 flag: true,
 timer: null // 該變數是用來記錄定時器的,防止點擊的時候觸發多個setInterval

獲取簡訊驗證的方法:

getCode() {
            let that = this;
            if (that.flag) {
                that.flag = false;
                let interval = window.setInterval(function() {
                    that.setStorage(that.second);
                    if (that.second-- <= 0) {
                        that.second = 60;
                        that.flag = true;
                        window.clearInterval(interval);
                    }
                }, 1000);
            }
        }

寫入和讀取localstorage:

　　　　　setStorage(parm) {
            localStorage.setItem("dalay", parm);
            localStorage.setItem("_time", new Date().getTime());
        },
        getStorage() {
            let localDelay = {};
            localDelay.delay = localStorage.getItem("dalay");
            localDelay.sec = localStorage.getItem("_time");
            return localDelay;
        }

防止頁面刷新是驗證碼失效:

judgeCode() {
            let that = this;
            let localDelay = that.getStorage();
            let secTime = parseInt(
                (new Date().getTime() - localDelay.sec) / 1000
            );
            console.log(localDelay);
            if (secTime > localDelay.delay) {
                that.flag = true;
                console.log("已過期");
            } else {
                that.flag = false;
                let _delay = localDelay.delay - secTime;
                that.second = _delay;
                that.timer = setInterval(function() {
                    if (_delay > 1) {
                        _delay--;
                        that.setStorage(_delay);
                        that.second = _delay;
                        that.flag = false;
                    } else {
　　　　　　　　　　　　　

                      that.flag = true;
                        window.clearInterval(that.timer);

                    }
                }, 1000);
            }
        }

然後在html掛載頁面完成後的生命鉤子(mounted)中調用judgeCode()方法就能實現該功能了