React数据回显

javascript 复制代码
 export function getSession(key) {  
  return sessionStorage.getItem(key)  
}  

export function setSession(key, value) {  
  sessionStorage.setItem(key, value)  
}  
  
export function clearSession(key) {  
  sessionStorage.removeItem(key)  
}  
  
export function getRouteParamSession(key) {  
  const data = JSON.parse(sessionStorage.getItem('ROUTE-PARAMS') || '{}')  
  return data[key]  
}  
   
export function setRouteParamSession(key, value) {  
  const data = JSON.parse(sessionStorage.getItem('ROUTE-PARAMS') || '{}')  
  data[key] = value  
  sessionStorage.setItem('ROUTE-PARAMS', JSON.stringify(data))  
}  
    
export function clearRouteParamSession(key) {  
  if (key === 'all') {  
    sessionStorage.removeItem('ROUTE-PARAMS')  
  } else if (key) {    // 如果 key 不是 'all',只删除一个属性而不是整个对象  
    const data = JSON.parse(sessionStorage.getItem('ROUTE-PARAMS') || '{}')  
    if (data[key]) {  
      delete data[key]  
      sessionStorage.setItem('ROUTE-PARAMS', JSON.stringify(data))  
    }  
  }    
}
javascript 复制代码
// 暂存当前页面的请求参数,达到在返回页面保持状态
const saveParams = (params)=>{
  setRouteParamSession('data1', params)
}
const getParams = ()=>{
  return getRouteParamSession('data1')
}

刷新页面清空数据

javascript 复制代码
   // 页面刷新(hooks)
  useEffect(()=>{
    const handleBeforeUnload = () => {
      clearRouteParamSession('data1')
    }
    window.addEventListener('beforeunload', handleBeforeUnload)
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload)
      if (React.$share) {
        React.$share.destroy()
      }
    }
  },[])
javascript 复制代码
//(类组件,生命周期)
  handleBeforeUnload = () =>{
    clearRouteParamSession('data1')
  }

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload)
  }

  componentWillUnmount(){
    window.removeEventListener('beforeunload', this.handleBeforeUnload)
  }
相关推荐
枣把儿2 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux3 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵5 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆8 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
Thomas游戏开发8 分钟前
Unity3D Boehm GC原理解析
前端框架·unity3d·游戏开发
豆苗学前端11 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_11 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪13 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany15 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc
liliangrong77717 分钟前
ES2025新特性详解
前端