Using LocalStorage in Your React Application

For my final capstone project at Flatiron School, I decided to build a letterbox’d type app to browse movies, add movies to a watchlist, and write reviews for movies to keep track of which ones you had seen. This was my first time using React to build an application that was beyond a single page, so one of the earliest bugs I was running into was a loss of state on refresh. I would be on the Browse page of my app, perusing through movies and finally I would decide to take a closer look at one. When I clicked on a particular movie, it would bring me to that movie’s show page and set the selectedMovie state in my App component to the movie object that I had clicked. However, upon refreshing the page, my application set my selectedMovie state back to an empty object and I would lose all of my movie data and get stuck with a blank screen. When I dug into this issue a bit, it seemed a little overkill to have my backend keep track of my selected movie. A seemingly common solution to this sort of problem was to use the localStorage property. In this blog, we’ll talk a little bit about what localStorage is and how to use it.

What is localStorage?

According to W3schools documentation, “the localStorage property allows you to save key/value pairs in a web browser. The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.” Okay, maybe we won’t need to hold our selected movie state for a year, a week, or even a day, but this all seems very promising! It sounds like we can use it to hold the state of our selectedMovie without losing it on refresh. Let’s take a look at how we were able to implement it in my application.

Let’s say I was perusing my movies and I clicked on “The Godfather.” Here is my function that runs onClick on a movie card.

First, I’m passing my movie object up from my onClick event and sending it up to this function. It’s then setting the state of selectedMovie to the movie that was passed up. Since setState is an asynchronous function, I placed my localStorage.setItem within the curly braces so that it can run while the selectedMovie state might still be getting set. Let’s break down what’s happening there a little further.

localStorage works by using key/value pairs. In this example, we’re setting a key of ‘selectedMovie’ (the first argument) with its value pointing to a JSON.stringified version of the movie object that was passed in (the second argument).

Great, now when we click on a movie card, we are setting that movie object in our localStorage under the key ‘selectedMovie.’ Next, we’ll need a way to retrieve this data when we need it. Let’s take a look at the function in my application that handles that.

In this function, we’re returning the movie object in state or the movie object in localStorage depending on if the state of selectedMovie has more than one key/value pair. Since we JSON.stringified the movie object when we used localStorage.setItem, we need to make sure to use JSON.parse in order to have a readable object when using localStorage.getItem. In order to access the data we stored, we just pass localStorage.getItem one argument: the key that we used to set the item.

We’re going to go ahead and pass this function down to our Movie component, which needs to keep track of what selectedMovie is. When we pass it down, we’ll invoke the function so that selectedMovie is set one way or the other.

And voila! Now our Movie component has access to our selectedMovie as this.props.movie and when we refresh when viewing our movie show page, our selectedMovie data is retained! If we go back to our browse page and select a different movie, our localStorage.setItem(‘selectedMovie’, JSON.stringify(movie)) within our handleMovieClick function will overwrite the movie object that was previously being held in localStorage. I hope this helps you get a better grasp of using localStorage in a multiple page React application.