javascript - How to maintain state after a page refresh in React.js?

Question

Lets say I have code that sets state for a select box chosen on the previous page:

this.setState({selectedOption: 5});

Is there any way to have this.state.selectedOption populated with 5 after a page refresh?

Are there callbacks that I can use to save this in localStorage and then do one large setState or is there a standard way of doing something like this?

Answer 1

So my solution was to also set localStorage when setting my state and then get the value from localStorage again inside of the getInitialState callback like so:

getInitialState: function() {
    var selectedOption = localStorage.getItem( 'SelectedOption' ) || 1;

    return {
        selectedOption: selectedOption
    };
},

setSelectedOption: function( option ) {
    localStorage.setItem( 'SelectedOption', option );
    this.setState( { selectedOption: option } );
}

I'm not sure if this can be considered an Anti-Pattern but it works unless there is a better solution.