vue获取手机验证码倒计时

现在有许多移动端登录是使用的是手机号码加验证码的方式登陆的,但是很多时候为了防止恶意获取短信验证码需要在前端做一些控制。

例如下列场景:

1. 我们在前端写一个定时器函数,显然可以满足倒计时功能,但是页面被刷新的话,倒计时就会丢失,
2. 那我们可以把倒计时的数组储存到cookie或者session中,可以满足页面刷新不丢失的效果,但是用户关闭掉页面,还是会存在倒计时丢失.
3. 最后我们需要把倒计时时间记录在localStorage中,记录当前储存时间和和剩余倒计时秒数,然后在重新打开页面的时候根据当前时间减去存储时间,要是大于剩余倒计时时间那么我们倒计时继续

最后贴上具体代码：

//html
<div class="ver-code-btn btn bg-gray white" @click="getVerifyCode">
  <span v-if="countFlag">获取验证码</span>
  <span v-else>剩余{{countNum}}S</span>
</div>
//js
 data () {
  return {
     countNum: 120, // 倒计时秒数
     countFlag: true
   }
 },
 created () {
 	this.monitor() 
 },
 methods: {
	monitor () {//监听关闭页面之后重新打开是否改继续倒计时
      let LocalDelay = this.getLocalDelay()
      let timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000)
      if (timeLine > LocalDelay.delay) {
        console.warn('倒计时过期')
      } else {
        this.countFlag = false
        this.countNum = LocalDelay.delay - timeLine
        let timer = setInterval(() => {
          if (this.countNum > 1) {
            this.countNum--
            this.setLocalDelay(this.countNum)  //设置每一次还需倒计时
          } else {
            clearInterval(timer)
            this.countFlag = true
          }
        }, 1000)
      }
    },
    countDown () {
      if (this.countFlag) {
        this.countFlag = false
        this.countNum = 120
        let timer = setInterval(() => {
          if (this.countNum > 1) {
            this.countNum--
            this.setLocalDelay(this.countNum)
          } else {
            clearInterval(timer)
            this.countFlag = true
          }
        }, 1000)
      } else {
        return false
      }
    },
    setLocalDelay (delay) {
      // location.href作为页面的唯一标识，可能一个项目中会有多个验证码。
      localStorage.setItem('delay_' + location.href, delay)
      localStorage.setItem('time_' + location.href, new Date().getTime())
    },
    getLocalDelay () {
      let LocalDelay = {
      	delay: localStorage.getItem('delay_' + location.href),
      	time : localStorage.getItem('time_' + location.href)
      }
      return LocalDelay
    },
    getVerifyCode () {
    if (this.countFlag) {
		api({phone}).then(res => {
	        this.countDown() // 倒计时函数
	        Toast({message: '发送成功!'})
	      })
		}
    }
}

看看实际效果


怎么重新打开浏览器,刷新页面都不会丢失,完美[手动滑稽]
但是要是换其他浏览器那我也冒得法了…