vue3笔记（33）搜索缓存

当列表项较多时，用户输入一些搜索条件、改变页数、改变页码获取到需要的搜索条目A，当对该搜索条目A进行操作（例如：编辑、查看等需要打开新页面），点击面包屑或者返回时，需要对之前的搜索项做一个缓存，以保证用户返回时能快速定位到之前的搜索条目A。
搜索缓存也遇到一些坑，本篇做一个记录。

问题描述

列表页注入缓存，在所有涉及页面做判断是否需要去除缓存
detail.vue 页面

watch(route, () => {
  const path = route.path
  if (path.indexOf('traceChip') < 0) {
    localStorage.removeItem('traceChip')
  }
})

不足：每个页面都要判断，很麻烦。若是有新需求要增加新页面，必须要再次加上。

在列表页面做缓存

搜索后打开其他页面时，做缓存

const openLook = (index: any, row: any) => {
  localStorage.setItem(
    'traceChip',
    JSON.stringify({
      query: toRaw(dataList.query),
      queryShow: toRaw(dataList.queryShow)
    })
  )
  router.push({
    path: '/traceDetailChip',
    query: { detail: JSON.stringify(toRaw(row.id)), backUrl: 'trace' + state.productInfoType }
  })
}

页面初始化时获取缓存，赋予 query，去除缓存，这样在第一次搜索时可以调用 query。

onMounted(() => {
  const traceChip = JSON.parse(localStorage.getItem('traceChip'))
    console.log('localStorage=', traceChip)
    if (traceChip) {
      dataList.query = traceChip.query
      dataList.queryShow = traceChip.queryShow
      localStorage.removeItem('traceChip')
    }
})