loading...
Cover image for Using Window.localStorage with React

Using Window.localStorage with React

rossanodan profile image Rossano D'Angelo ・2 min read

React doesn't remember anything.. localStorage does!

To make the Home component able to restore the last fetched matchday, I can use the localStorage object.

Window.localStorage is a small memory hosted by the clients' browser and it can be used to store some "helpers" values. To learn more about it, take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

Fetching the last fetched matchday

So, in the Home.tsx

constructor(props: IProps) {
  super(props);

  /** localStorage **/
  let matchday;
  if (localStorage.getItem('lastFetchedMatchday')) {
    matchday = Number(localStorage.getItem('lastFetchedMatchday'));
  } else {
    matchday = 1;
    localStorage.setItem('lastFetchedMatchday', matchday.toString());
  }
  /** localStorage **/

  this.state = {
    matchday,
    matches: [],
    competition: null,
    error: false,
    totalMatchdays: 38,
  };
}

The code above, before setting the initial state, checks for a record in the localStorage. This record is a key, value pair with the key equal to lastFetchedMatchday.

At line 7 I used Number(...) because the value I got from localStorage is a string and it needed to be converted into a number (as defined with the interface).

Setting the last fetched matchday

The value I fetch from the localStorage needs to be set somewhere in the application. It makes sense to me setting it when I select a new matchday from the select element.

handleChange = (event: any) => {
  this.setState({ matchday: event.target.value }, () => {
    /** localStorage **/
    localStorage.setItem('lastFetchedMatchday', this.state.matchday.toString());
    /** localStorage **/
    this.fetch();
  });
};

As before, I used this.state.matchday.toString() because localStorage stores strings as I can see from the method definition

Storage.setItem(key: string, value: string): void

Conclusion

At this point, once picked a matchday from the select, I don't lose my last selection even if I reload the page or if I close the browser.

Alt Text

Posted on by:

rossanodan profile

Rossano D'Angelo

@rossanodan

Application engineer at The LEGO Group. I like reading manga. All my opinions are belong to me.

Discussion

pic
Editor guide