vue--localStorage临时存储未提交表单数据，下次登陆后展示上次未提交的数据

• 方式1–利用watch监听数据变化
• 监听 addForm为表单数据 :model=“addForm”

 'addForm': {//深度监听
      handler (res) {
        if (res) {
          var tempData = []
          tempData.push(this.addForm)//值变化时保存在tempData 
          tempData.push(JSON.parse(window.sessionStorage.getItem('user')))//获取用户名也保存在tempData 中
          localStorage.setItem('formTempData', JSON.stringify(tempData))//本地存储存储的是字符串
        }
      },
      deep: true
    },

• 页面初始化的时候判断加载数据 created 执行 根据不同用户名进行加载

  formDataInit () {
      var arr = JSON.parse(localStorage.getItem('formTempData1'))
      //获取本地用户名与存储的用户名做比较 相同才进行数据重新渲染
      var userNm = JSON.parse(window.sessionStorage.getItem('user'))
      if (arr != null && userNm.userNm == arr[1].userNm) {
        this.addForm = arr[0]
      }
    },

• 提交事件 提交成功时清除localStorage中的数据

localStorage.removeItem('formTempData')

• 附上一张图片
  
• 方式二 网上整理利用计时器自动保存数据

    // 临时存储未提交表单数据 下次登陆后重新渲染
    autoSaveData () {
      var tempData = []
      tempData.push(this.addForm)
      localStorage.setItem('formTempData', JSON.stringify(tempData))
    },
    changeValue () {//created 执行 每十秒自动保存数据
      this.timer = window.setInterval(() => {
        setTimeout(this.autoSaveData(), 0)
      }, 10000)
    },
    formDataInit () {
      if (localStorage.getItem('formTempData')) {
        var arr = []
        arr = JSON.parse(localStorage.getItem('formTempData'))
        console.log('初始化数据--', arr[0])
        this.addForm = arr[0]
      }
    },

  beforeDestroy () {
    if (this.timer) { // 组件销毁时清除定时器
      clearInterval(this.timer) 
    }
  },