Javascript 反应：刷新时如何保存数据？渲染时从API检索数据

以下是主应用程序JS文件中的我的组件：

类应用程序扩展了React.Component{
状态={
myValue:“某些值”
}
componentDidMount（）{
//从API检索数据并将其保存到状态
myApi.getData（）.then（（myData）=>{
此.setState（myData）；
});
}
render（）{
返回(
//呈现与检索到的数据相对应的网站（状态）
)
}
}

渲染后，

状态

（数据）将更改。 刷新网站时，状态设置为从API中新检索到的数据

---

• 刷新后如何保存更改的数据？ （刷新时不获取新数据？）

---

本地存储是最适合您的用例的解决方案

class App extends React.Component {
    state = {
        myValue: 'some value'
    }

    const myData = JSON.parse(localStorage.getItem('myData'));

    if(myData) return;

    api.getData().then((myData) => {
        localStorage.setItem('myData', JSON.stringify(myData));
        this.setState(myData);
    });

    render() {
        return (
            // render the website corresponding to the retrieved data (state)
        )
    }
}

希望这有帮助

class App extends React.Component {
  state = {
    myData: 'some value'
  }

  componentDidMount() {
    let myDataFromSessionStorage = JSON.parse(sessionStorage.getItem("myData"))
    if (!myDataFromSessionStorage) {
      // retrieve the data from an API and save them into state
      myApi.getData().then((myData) => {
        this.setState({
          myData,
        }, () => {
          //Callback which will be executed once the state has been set
          sessionStorage.setItem("myData", JSON.stringify(myData))
        });
      });
    } else {
      this.setState({
        myData: myDataFromSessionStorage,
      })
    }
  }

  render() {
    return (
      // render the website corresponding to the retrieved data (state)
    )
  }
}

---

即使重新打开浏览器，也可以使用localstorage保留数据。

在您的

componentDidMount

中，检查您的状态值是否包含任何内容。如果没有，请检查本地存储中的cookie。如果cookie不存在，请调用

getData

，并将该值存储为cookie的一部分。如果是，请从cookie中读取数据，并将其作为新状态的一部分。这可能有助于解释如何使用本地存储与React：请参阅和