VUE倒计时刷新页面不影响

前端 强制性JS倒计时关闭浏览器(刷新页面也存在)也会存在的倒计时*

VUE 倒计时刷新页面也存在 (持续更新)

不多BB 直接上代码
活用 localStorage 机制
(VUE+webpack版)

注意

目前的代码是关闭浏览器会记录你关闭时的秒数，并且下次来到这个页面时，会在上次的时间进行倒计时 代码有缺陷 (懒)

如果只是想页面刷新时倒计时不重置只需要把下面的 localStorage 换成 sessionStorage 即可

**

##

<script>
 export default {
        data(){
            return{
             inters:null,//定时器
             coutrdown:60//倒计时时间
            }
		 },
			
	methods:{
	
		toLoading(){ //短信验证码发送
  			let self=this
   			self.inter = setInterval(self.fusn, 1000);
		}, 
		fusn(){
   			 let self=this
    		 self.coutrdown--;
    		 console.log(self.coutrdown)
    		 window.localStorage.setItem("X_no_time",self.coutrdown);//存入本地
    		 if(window.localStorage.getItem("X_no_time")<="0"){//等于0时清空
        		window.localStorage.removeItem('X_no_time');
    		}
    		 if(coutrdown <= 0) {//小于或者等于0时
       			  self.coutrdown=60;//重新赋值为60秒,如果用户在倒计时期间关闭了浏览器下次打开也面会调用created()方法
         		  clearInterval(self.inter)
   			 }
   			 
   			 
		 }//fusn

		},//methods


		created(){//实例化完成后
      	  let self=this;
       	 if(window.localStorage.getItem("X_no_time")==null){
            	console.log("第一次或者又过来一次");
        }else{
            self.coutrdown=Number(window.localStorage.getItem("X_no_time"));
            self.toLoading()
        }

       }

        }//export default

	</script>