How can i use localStorage to maintain state after a page refresh in React

Question

Each time a user logs in, i want the state to remain at 'true' even if there is a page reload. The state is set initially to false, (let _authed = false). But when i reload the page, it goes back to false, which is the index page.

What i did When the user logs in, i save the user's details in localStorage and when the user logs out, i cleared the localStorage and i set it to false. (this works fine)

In the setAuthed() function, i tried to check if the user i stored in localStorage is not null, it should keep the authed variable to true.

But its not working when i refresh the page. Is there anything, i am doing wrong? Help appreciated.

let _authed = false;

// User logs in, set user in localStorage
saveUser(user){
  _user = user;
  localStorage.setItem('user', JSON.stringify(user))
},

//User clicks logout, set state to false 
setLogout(){
  _authed = false;
  localStorage.clear()
},

 // If there is a user in local storage, always set state to true
setAuthed(){
     if (localStorage.getItem("user") !== null) {
      _authed = true;
      }
},


getAuthed(){
  return _authed;
},

Where is the actual React code that calls these functions? And where do these functions live? (hopefully not global scope but some library object that you're importing/requiring for your React component(s)?) — Mike 'Pomax' Kamermans
Its actually a flux architecture and the code resides in the store — Wes

Ivan Burnaev Ivan Burnaev · Accepted Answer · 2017-07-14T20:38:59

You can use React lifecycle methods to read and write some kind of persistent state. Here I've wrote a tiny example to show it.

class Root extends React.Component {
  state = {
    isLoggedIn: false
  }
  
  componentDidMount () {
    const persistState = localStorage.getItem('rootState');
    
    if (persistState) {
      try {
        this.setState(JSON.parse(persistState));
      } catch (e) {
        // is not json
      }
    }
  }
  
  componentWillUnmount () {
    localStorage.setItem('rootState', JSON.stringify(this.state);
  }

  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

How can i use localStorage to maintain state after a page refresh in React

1 Answers