如何防止网页刷新后页面数据丢失或者状态重置

我的业务场景

主页后点击呼叫进入会话页====>waiting状态
对方接听====>修改为conversation状态
通话中在会话页面刷新====>保持conversation状态
路由到主页后再次点击呼叫进入会话页====>waiting状态
对方接听====>修改为conversation状态

避免刷新后数据丢失通常有几种方式避免：

localStorage

将数据或者状态存储在localStorage中，初始化时默认从localStorage读取，状态或数据改变时再次存储。

路由参数

使用React-Router将参数传递给路由组件

我的业务场景不适用以上两种方式，如果各位有跟我差不多的场景可以采用以下方式解决：

URL参数

通过history.push的方式将数据拼接在当前url后，默认从params中读取。

 const history = useHistory();
 const params = useParams();
 
 //解析参数
 const infos = atob(params.infos);
 const infoObj = JSON.parse(infos);
 
// 状态默认从params中读取
 const [sessionState, setSessionState] = useState(
    infoObj.sessionState || 'waiting',
  ); //waiting:等待中, conversation:会话中

// 改变状态
infoObj.sessionState = 'conversation';
// 将状态拼接在url后（刷新则会从params中读取）  
history.push(`/conversation/${btoa(JSON.stringify(infoObj))}`);

Query参数

const history = useHistory();
const location = useLocation();

// 状态默认从query中读取
 const [sessionState, setSessionState] = useState(
    location.query.sessionState || 'waiting',
  ); //waiting:等待中, conversation:会话中

// 改变状态
history.push({ 
        pathname: '/conversation/',
        query: { 
          sessionState : 'conversation',
        }