vue我的项目点击按钮获取手机验证码倒计时，并且页面刷新秒数不会被初始化。原理应用了sessionStorage，上面是代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue我的项目点击按钮获取手机验证码开始倒计时，并且页面刷新秒数不会被初始化</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <style> * { margin: 0; padding: 0; } .name-input { position: relative; display: inline-block; } .input { width: 400px; height: 50px; } .auth-code { cursor: pointer; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } .auth-code.active { color: #333; opacity: .7; cursor: not-allowed; } </style></head><body> <div id="app"> <div class="item"> <div class="label-class">短信验证码</div> <div class="name-input"> <input class="input" type="text" v-model="captcha"> <div class="auth-code" :class="[{'active': btnDisabled}]" @click="getCodeFn">{{btnDisabled ? captchaTime + '秒后重试' : '获取验证码'}}</div> </div> </div> <script> new Vue({ el: '#app', data() { return { // 验证码 captcha: '', // 避免验证码按钮反复点击 btnDisabled: false, // 验证码定时器 interval: null, // 验证码倒计时 captchaTime: 60, // 固定工夫 fixedSecond2: 60, } }, mounted() { // 获取上一次点击验证码的工夫 let startTime = sessionStorage.getItem('startTime') let num = (new Date().getTime() - startTime) / 1000; let second = this.fixedSecond2 - parseInt(num); console.log(second, "second----"); // 当重进登录页面或者登录页面被刷新后拿到上一次点击验证码的工夫。如果没过期，则接着走倒计时,而不是从60秒从新开始倒计时 if (second > 0) { this.btnDisabled = true; this.captchaTime = second; this.countdownFun60() } }, methods: { // 获取验证码 async getCodeFn() { // 避免反复点击 if (this.btnDisabled) return; this.btnDisabled = true; this.countdownFun60(); // 验证码点击的工夫 sessionStorage.setItem('startTime', new Date().getTime()); }, // 手机验证码60秒倒计时 countdownFun60() { this.interval = setInterval(() => { this.captchaTime = this.captchaTime - 1; if (this.captchaTime === 0) { clearInterval(this.interval); this.btnDisabled = false; this.captchaTime = this.fixedSecond2; } }, 1000) }, } }) </script></body></html>如果页面被敞开也想让倒计时失效，应用localStorage就能够了。