CODEWITHSUNDEEP
javascriptreactjslocal-storage
Wes
Wes

Reputation: 23

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

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;
},

Upvotes: 2

Views: 9628

Answers (1)

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

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>

Upvotes: 2

Related Questions