• 实现重发验证码的等待时间不随页面刷新关闭消失,真正的做到


    我们可以用到 cookie ,把发送验证码的倒计时写入到cookie 里面,每次在页面初始化的时候都读取有就获取没有就写入

    const currentTime = 60 //默认等待的时间
    export default {
    
      data() {
        return {
          code: '', // 验证码
          time: currentTime, // 剩余时间
          timer: null // 定时器
        }
      },
      mounted() {
        // 获取cookie的验证码时间
        this.getCodeHasTime()
      },
      methods: {
        // 发送验证码的方法
        async gotoSendCode() {
          // 设置时间
          this.setTimeCookie()
          // 请求验证码
          // TODO
        },
        // 获取最新的cookie的时间
        getCodeTime() {
          const oldTime = Cookies.get('codeTime')
          if (oldTime) {
            const remainTime =
              currentTime -
              new Date(escape(new Date().getTime()) - oldTime).getSeconds()
            this.setTimer(remainTime)
          }
        },
        setTimeCookie() {
          Cookies.set(`codeTime`, escape(new Date().getTime()), {
            expires: (currentTime * 1) / (24 * 60 * 60),
            domain: '.jdcloud.com'
          })
          Cookies.set(`codeTime`, escape(new Date().getTime()), {
            expires: (currentTime * 1) / (24 * 60 * 60),
            domain: '.jcloud.com'
          })
          this.setTimer(currentTime)
        },
        setTimer(val) {
          this.time = val
          this.isSendCode = true
          this.timer = setInterval(() => {
            if (this.time > 0) {
              this.time--
            } else {
              clearInterval(this.timer)
              this.time = currentTime
              this.isSendCode = false
            }
          }, 1000)
        }
      }
    }

    本文来自博客园,作者:我爱小番茄,转载请注明原文链接:https://www.cnblogs.com/l-y-c/p/12621111.html

  • 相关阅读:
    HTML JS 数据校验
    算法: 实现LRU缓存,读取、写入O(1)实现
    C/C++ 二维数组
    tmux 终端分屏利器使用
    关于Apache Tomcat存在文件包含漏洞的安全公告
    SQLSERVER触发器触发INSERT,UPDATE,DELETE三种状态
    SQL Server 触发器
    SQL Server游标
    SQL Server基础之游标
    阿里maven镜像配置
  • 原文地址:https://www.cnblogs.com/l-y-c/p/12621111.html
Copyright © 2020-2023  润新知