如何在反应时从本地存储中检索状态

Question

Guys is there anyway to get the state from localstorage?

I Read some articles and some questions here, but none helps, how Could I load my state saved on the local storage? I Don't want to set the state field by field, there's a lot of it, but I have 3 components that has functions of previous and next , so on the previous I want to load the state to be the same of that session.

I'm trying this:

  var JSON1= JSON.stringify(this.state)
  localStorage.setItem('JSON1', JSON1)

And on the constructor

   constructor(props) {
    super(props);
    let JSONSTOR = JSON.parse(localStorage.getItem("JSON1"))
    var newST = this.state
    newST = JSON.parse(localStorage.getItem("JSONCLIENTE 1"));
    this.setState(newST)

}

But it's not working, is there anyway to do this?

Answer 1

As Fernando Ramirez suggested, you could use Redux. Redux also takes a state parameter so you can set the initial state. There are examples of how to save Redux state to localStorage and then also re-load it from localStorage. Here's a tutorial from the creator of Redux Dan Abramov .

The thing you are trying to do looks correct, you just have some mistakes in your flow.

This should work for your case:

var JSON1 = JSON.stringify(this.state);

localStorage.setItem("JSON1", JSON1);

And then in your constructor you can reload the state from localStorage:

constructor(props) {
    super(props);

    this.state = JSON.parse(localStorage.getItem("JSON1"));
}

Answer 2

I think the best way to achieve this could be using Redux. With Redux you can handler the global state of your app.

Here's Redux official documantation:

Redux

Answer 3

You can easily load localStorage data into React using the lifecycle methodcomponentDidMount :

componentDidMount() {
  // Load localStorage data into state (if it exists)
  let data = JSON.parse(localStorage.getItem("yourData"));
  if (data) {
    this.setState(data);
  }
}

Keep in mind that the data retrieved from localStorage is a string that should have an object like appearance, this way you can convert it into a valid object with JSON.parse() , this in turns allows you to successfully set the local state in the React app.

Working example here