react实现参数缓存

本方法只是将参数存储起来，再次进入页面后会再调请求获取数据，并不能像vue的kee-alive一样将整个页面缓存
通过本地存储，将获取列表数据的各项参数存储起来，当进行一些类似的新建或者进入更深层页面退出时，使参数不变。

1.实现数据存储的封装

//方便获取路由切换时之前页面保存的状态
export function getRouteParamSession(key) {
  const data = JSON.parse(sessionStorage.getItem('本sessionStorage的名字') || '{}')
  return data[key]
}

/**
 * 修改页面状态时保存到session中
 * @param {*} value
 */
export function setRouteParamSession(key, value) {
  const data = JSON.parse(sessionStorage.getItem('本sessionStorage的名字') || '{}')
  data[key] = value
  sessionStorage.setItem('本sessionStorage的名字', JSON.stringify(data))
}

export function clearRouteParamSession(key) {
  if(key === 'all') {
    sessionStorage.removeItem('本sessionStorage的名字')
  } else if(key){
    const data = JSON.parse(sessionStorage.getItem('本sessionStorage的名字') || '{}')
    data[key] && delete data[key]
    sessionStorage.setItem('本sessionStorage的名字', JSON.stringify(data))
  }
  sessionStorage.removeItem('本sessionStorage的名字')
}

2.使用

(1) 在头部tab和侧边tab切换时，调用clearRouteParamSession(all)清空所有缓存
(2) 在各个需要缓存的文件内部（如下）

// 暂存当前页面的请求参数，达到在返回页面保持状态
const saveParams = (params) => {
  setRouteParamSession('存储的名字', params)
}
const getParams = () => {
  return getRouteParamSession('存储的名字')
}

function Approval(props) {
    ...
    // 初始化数据不再直接为空,通过getParams初始化数据
    ...
    // 再获取列表数据之前，将收集的params保存起来
    ...
    // 页面刷新时，清空当前页面的缓存
      useEffect(() => {
        // 页面刷新
        const handleBeforeUnload = () => {
          clearRouteParamSession('存储的名字')
        }
        window.addEventListener('beforeunload', handleBeforeUnload)
        return () => {
          window.removeEventListener('beforeunload', handleBeforeUnload)
          if (React.$share) {
            React.$share.destroy()
          }
        }
      }, [])
     ...
}

难点：数据回显，可能需要对数据进行特殊处理