如何保存切换状态,刷新页面后不会丢失

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何保存切换状态,刷新页面后不会丢失相关的知识,希望对你有一定的参考价值。

你好我的项目主要来自react和redux,我在这个应用程序中建立应用程序,当它将数据同步到日历时切换,我希望它在刷新页面后保持切换。这是一些代码

constructor(props){
    super(props);

    this.state ={
        value: 1,
        toggled: undefined
    };
    this.handleToggle = this.handleToggle.bind(this);
} 

handleToggle = (event,toggled,index) => {
    this.setState({toggled});

    if (toggled == true){
         ///sync the Calendar code////
    }else{
        /// un sync ////
    }
}

回来之后

  <Toggle label={translate('sync')}
          onToggle={this.handleToggle}
          toggled={this.state.toggled}
  />

是否存在除了this.state以外的状态标记?

答案

在卸载时保存localStorage中的状态,并在初始安装时重新填充

constructor(props){
    super(props);
    const local = localStorage.getItem('state');
    if(local) {
       this.state =JSON.parse(local)
    } else {
          this.state ={
               value: 1,
               toggled: undefined
          };
          this.handleToggle = this.handleToggle.bind(this);
    }
}

handleToggle = (event,toggled,index) => {
    this.setState({toggled});
    if (toggled == true){
         ///sync the Calendar code////
    }else{
       /// un sync ////
}

componentWillUnmount() {
   localStorage.setItem('state', JSON.stringify(this.state));
}

以上是关于如何保存切换状态,刷新页面后不会丢失的主要内容,如果未能解决你的问题,请参考以下文章

整么用js保存刷新前的数据,也就是刷新后的数据不是刚进入该页面的数据而是刷新前的数据。

刷新后 React-Redux 状态丢失

vuekeepalive隔页数据还保存吗

vue切换路由不会刷新页面就是巨大的优点吗?

vuex页面刷新数据丢失的解决办法

React Redux 状态在页面刷新时丢失