刷新页面后保留状态

时间:2018-12-18 20:11:49

标签: javascript html reactjs redux material-ui

  • 我想学习对自己做出反应。
  • 当我按下“收藏夹”按钮时,这是心脏符号会更改颜色。
  • 但是当我刷新页面时,它消失了。
  • 因此我研究并找到了以下链接 How to maintain state after a page refresh in React.js?
  • 现在实施后,我可以在开发人员工具的“应用程序”选项卡中看到本地存储。
  • 但是刷新后仍然无法保留颜色。
  • 调试时,我在getInitialState中发现没有任何打印问题。
  • 你能告诉我如何解决它吗?
  • 以便将来我自己修复。
  • 在下面提供我的相关代码段和沙箱。
  • 我所有的代码都在RecipeReviewCard.js中

https://codesandbox.io/s/xrp56z04yq

  getInitialState = () => {
    var addFavirote = localStorage.getItem("AddFavirote") || 1;
    console.log("getInitialState--->", addFavirote);

    return {
      addFavirote: addFavirote
    };

    //this.setState(state => ({ belowExpanded: !state.belowExpanded }));
  };


<FavoriteIcon
              style={{ display: this.state.addFavirote ? "none" : "" }}
              onClick={e => {
                console.log("favoriteEvent---.", e);
                console.log(
                  "this.state.addFavirote---.",
                  this.state.addFavirote
                );

                localStorage.setItem("AddFavirote", !this.state.addFavirote);
                this.setState({ addFavirote: !this.state.addFavirote });

                console.log(
                  "!this.state.addFavirote---.",
                  !this.state.addFavirote
                );

                this.props.onAddBenchmark(this.props);
              }}
            />

1 个答案:

答案 0 :(得分:2)

LocalStorage syntax文档中,您需要将addFavorite序列化为字符串以设置为本地存储。在componentDidMount上,当从localStorage检索值时,可以将其解析回getInitialState中的原始内容。

例如,您可以

localStorage.setItem(JSON.stringify(!this.state.addFavorite)) //ie "true" || "false"

并将其恢复为

getInitialState = () => {
  let fav = localStorage.getItem('AddFavorite');
  let addFavorite = JSON.parse(fav || "true");
  this.setState({ addFavorite });
}

PS:如果不破坏功能,建议您在componentWillUnmount中设置localStorage。设置本地存储和JSON序列化会影响性能。