用户输入表单数据后,定时将数据保存在本地localStorage,若提交不成功或退出页面,下次进入页面时加载上次未提交的数据

首先将数据存储在localStorage中,因为 localStorage只能存字符串我这里是json,现将json转为字符串保存

 autoSaveData() {
      // 将填写的数据但未提交保存在本地
      this.tempData = []
      this.tempData.push(this.formID)
      this.tempData.push(this.formName)
      this.tempData.push(this.formBuilder.actions.getData('json'))
      localStorage.setItem('formTempData', JSON.stringify(this.tempData))
      // this.$message.success('已自动保存')
    },

每隔十秒执行autoSaveData。

单纯的使用setInterval会导致页面卡死,setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死,

但是setTimeout是自带清除定时器的,因此此方法可以实现每隔10执行一次的功能。

 changeValue() {
      this.timer = window.setInterval(() => {
        setTimeout(this.autoSaveData(), 0)
      }, 10000)
    },

但是还存在一个问题,就是当不在等前页面时,定时器依旧在执行,这里需要在离开页面时将定时器清空

 beforeDestroy() {
    if (this.timer) { // 如果定时器还在运行 或者直接关闭,不用判断
      clearInterval(this.timer) // 关闭
    }
  },

 用户下次进入页面时,若本地有localStorage,则询问用户是否加载缓存文件,因为缓存的表单有个唯一id,用户下次进入的时候先判断缓存的id和进入的id是否相同,相同才加载。

   var lostor = localStorage.getItem('formTempData')
          lostor = JSON.parse(lostor)
          if (lostor !== null && lostor[0] === this.formID) { // 若存在缓存并且缓存的id和当前表单的id相等,则询问是否加载缓存文件
            this.$confirm('发现上次未提交的数据是否加载?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {
              _this.editData = JSON.parse(localStorage.getItem('formTempData'))
              this.$message({
                type: 'success',
                message: '加载成功!'
              })
            }).catch(() => {
              _this.editData = data
              this.$message({
                type: 'success',
                message: '已加载原始表单'
              })
            })
          } else {
            _this.editData = data
          }

在提交成功后,将localStorage中的数据删除

 localStorage.removeItem('formTempData') // 提交成功清空本地缓存

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页