vue中考试倒计时,自动补零,刷新不重置

最近开发考试模块,需要写一个倒计时,要求刷新不重置(目前存储在sessionStorage中,可以根据需求自行更换),自动补零.

<template>
    <div>
        <div class="time">{{countDown}}</div>
    </div>
</template>

data(){
    return {
      countDownTime: 180,  //设置默认时间,(单位秒)
      timer: null,  //计数器名称,便于后面清除
    }
},
created() {
    //初始化时读取sessionStorage中储存的数据,有就设置为countDownTime,没有就根据自己逻辑设置countDownTime    if (window.sessionStorage.getItem("exam_time") == null) {
      this.startCountDown();
    } else {
      this.countDownTime = Number(window.sessionStorage.getItem("exam_time"));
      this.startCountDown();
    }
},
computed: {
    // 计算属性自动计算countDownTime,并转换为倒计时
    countDown() {
      const minutes = Math.floor(this.countDownTime / 60);
      const seconds = this.countDownTime % 60;
      const m = minutes < 10 ? "0" + minutes : minutes;
      const s = seconds < 10 ? "0" + seconds : seconds;
      return `${m}:${s}`;
    },
},
methods:{
    startCountDown() {
      this.timer = setInterval(() => {
        if (this.countDownTime <= 0) {
          //当监测到countDownTime为0时,清除计数器并且移除sessionStorage,然后执行提交试卷逻辑
          clearInterval(this.timer);
          sessionStorage.removeItem("exam_time");
          alert("提交试卷");
        } else if (this.countDownTime > 0) {
            //每秒让countDownTime -1秒,并设置到sessionStorage中
          this.countDownTime--;
          window.sessionStorage.setItem("exam_time", this.countDownTime);
        }
      }, 1000);
    },
}