vue中实现F5刷新缓存

最新推荐文章于 2024-08-29 15:52:34 发布

yu_zheng5163

最新推荐文章于 2024-08-29 15:52:34 发布

阅读量130

点赞数 1

文章标签： vue.js 缓存前端

本文链接：https://blog.csdn.net/m0_56095048/article/details/141069950

版权

 <el-radio-group v-model="radioValue"  @change="handleRadioChange">
              <el-radio v-for="item in quData.answerList" :label="item.id">{{ item.abc }}.{{ item.content }}
                <div v-if="item.image != null && item.image != ''" style="clear: both">
                  <el-image :src="fullImageUrl(item.image)" style="max-width:25%;" />
                </div>
              </el-radio>
            </el-radio-group>

  created() {
    const id = this.$route.params.id
    if (typeof id !== 'undefined') {
      this.paperId = id
      this.fetchData(id)
    }

    this.getExamUserInfo();

    // 缓存进度条的值
    let savedCompleteNum = localStorage.getItem('completeNum');
        console.log("缓存"+savedCompleteNum)
        if (savedCompleteNum) {
            this.progressList.completeNum = parseInt(savedCompleteNum, 10);
        }
  },

// 监听选项框的事件
    handleRadioChange() {
      // 更新答题数量
      this.progressList.completeNum +=1;
      // 更新进度条
      this.setItemProgress();
      // 将 completeNum 存储到 localStorage **
      localStorage.setItem('completeNum', this.progressList.completeNum);

    },
    // 进度条
    setItemProgress() {
      //this.progressList.completeNum = this.countAnswered();
      if (this.progressList.completeNum > this.progressList.planNum) {
        return 100
      } else {
        return parseInt((this.progressList.completeNum / this.progressList.planNum).toFixed(2) * 100)
      }
    },