vue页面切换时给表单添加缓存_vue 缓存表单数据-CSDN博客

本文链接：https://blog.csdn.net/heiniuCSDN/article/details/135868533

首先，在Vue组件的data中定义一个变量，用于存储表单数据：
```
const formData = ref({
  key:"",
  key2:""
  })
```

当表单数据发生变化时，将更新后的formData变量存储到缓存中：

watch(formData, (newData) => {
  localStorage.setItem('formData', JSON.stringify(newData));
}, {deep: true})

当页面切换时，从缓存中获取表单数据并更新到formData变量中：

mounted() {
  // 从localStorage中获取表单数据
  const cachedFormData = localStorage.getItem('formData');
  if (cachedFormData) {
    // 将缓存的数据解析为JSON对象并更新到formData变量中
    this.formData = JSON.parse(cachedFormData);
  }
}

现在我们基本就实现了页面缓存，但是由于没有设置缓存的清楚所以及时我们关闭了当前页面再次点开始还是会有缓存记录。

在解决这个问题我们先优化下我们的存储键值。上述代码的键值是只存在于当前页面的也就是不共享的，所以我们需要将这些键值存储在一个所有页面都可以访问的地方。这里的方法很多我采取一种较为简单的办法，将键值存储在路由信息中，在配置路由的文件中添加meta属性，即可设置一个cacheKey

   {
          path: 'ruleManage/auditRuleFuncAdd',
          name: '稽核函数新增',
          component: () => import('@/views/ruleManage/auditRuleFuncAdd.vue'),
          meta: { cacheKey: 'auditRuleFuncAdd'},// 自定义缓存键
          props: { type: 'add' }
   },

然后就可以将之前的2，3步的键值替换成这里的键值。然后我们可以在导航页面添加页面缓存清楚策略.

4.页面缓存清楚策略

// 关闭tag
const closeTag = (tag: any) => {
 // 获取当前标签对应的缓存键
 const cacheKey = tag.meta.cacheKey;
 console.log("cache===>"+cacheKey);
 
  // 清除缓存
  localStorage.removeItem(cacheKey);


  .....其余操作
}

这部分代码中的tag获取：我原本的代码中使用了store模块来存储路由信息

<router-link
            :to="item.path"
            :key="item.path"
            class="tag-item transition-item"
            :class="{ checked: isCheck(item) }"
            v-for="item in tagsViewStore.visitedViews"
            ref="tagItem"
        >
          {{ handleName(item)}}
          <el-icon style="margin-left: 6px"  v-if="item.meta.title!='首页'" @click.prevent="closeTag(item)">
            <close/>
          </el-icon>

......省略

DOM：
import {useTagsViewStore} from '@/stores/modules/tagView'
const tagsViewStore = useTagsViewStore()

当然也有更直接的方法：

import {useRouter, useRoute} from 'vue-router'

const route = useRoute()

const metaData = route.meta.cacheKey //这里可以获取中的meta的数据

除了在关闭页面标签时清楚缓存外，在表单成功提交时也需要清楚缓存，所以在执行提交的方法中在使用 localStorage.removeItem(cacheKey);即可这里的cacheKey可以直接输入不需要获取。