Saving Favorites to Local Storage

The Problem: In-Memory State

Before we dive in, it's crucial to understand why our state disappears.

As the video explains, we need a storage mechanism that lives outside of our application's memory. localStorage is perfect for this.

What is localStorage?

localStorage is a web storage API that allows you to save key-value pairs in a web browser with no expiration date. The data will persist even after the browser window is closed.

You can interact with it using a few simple methods:

• localStorage.setItem(key, value): Saves a value associated with a key.
• localStorage.getItem(key): Retrieves the value for a given key.
• localStorage.removeItem(key): Deletes a key-value pair.

However, there's a catch: localStorage can only store strings. Our favorites list is an array of objects. To handle this, we must convert our array to a string before saving it and parse it back into an array when we retrieve it. For this, we use two built-in JavaScript functions:

• JSON.stringify(object): Converts a JavaScript object or array into a JSON string.
• JSON.parse(string): Parses a JSON string, constructing the JavaScript value or object described by the string.

Step 1: Saving Favorites to localStorage

Let's start by modifying our application to save the favorites list whenever a new movie is added. We will update our addFavouriteMovie function to not only update the state but also write that new state to localStorage.

The following video provides a practical walkthrough of this exact process within a movie app context.

To apply this to your project, follow these steps in your main App.jsx file:

1. Create a helper function to save data. This keeps your code organized.

   const saveToLocalStorage = (items) => {
       localStorage.setItem('react-movie-app-favourites', JSON.stringify(items));
   };
   

   Note: Using a specific key like 'react-movie-app-favourites' prevents conflicts with other applications that might also use localStorage on the same domain.

2. Call this function in addFavouriteMovie.

   const addFavouriteMovie = (movie) => {
       const newFavouriteList = [...favourites, movie];
       setFavourites(newFavouriteList);
       saveToLocalStorage(newFavouriteList); // Add this line
   };
   

Now, when you add a movie to your favorites, the updated list is immediately saved as a string in localStorage. You can verify this by opening your browser's developer tools, going to the Application tab, and selecting Local Storage.

Step 2: Loading Favorites on Application Start

Saving the data is only half the solution. We also need to retrieve it when the application first loads. To do this, we'll use a useEffect hook with an empty dependency array ([]), which ensures the code inside runs only once when the component mounts.

Here is the useEffect hook you'll add to your App.jsx:

// In App.jsx, add this useEffect hook
useEffect(() => {
    const movieFavourites = JSON.parse(
        localStorage.getItem('react-movie-app-favourites')
    );

    // It's good practice to check if movieFavourites is not null
    // in case localStorage is empty on the first visit.
    if (movieFavourites) {
        setFavourites(movieFavourites);
    }
}, []); // Empty dependency array means this runs only once on mount

With this in place, refresh your application. You should see your favorited movies appear immediately, loaded directly from localStorage!

Step 3: Persisting Favorite Removals

Our feature is almost complete. The last step is to ensure that when a user removes a movie from their favorites, that change is also saved. The logic is identical to adding a favorite: after updating the state, we save the new state to localStorage.

Update your removeFavouriteMovie function in App.jsx:

const removeFavouriteMovie = (movie) => {
    const newFavouriteList = favourites.filter(
        (favourite) => favourite.imdbID !== movie.imdbID
    );

    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList); // Add this line
};

That's it! Your favorites feature now fully persists across browser sessions.

For a complete text-based reference of all the code changes we made, you can review the final section of the freeCodeCamp article that accompanies the video tutorial.

Conclusion

Congratulations on completing the mid-course project! You've successfully built a functional, stylish, and now persistent movie search application. By adding localStorage, you've learned a fundamental technique for improving user experience by preserving application state on the client side.

Key Takeaways:

• React state is ephemeral. It is lost on page refresh.
• localStorage provides simple client-side persistence for storing data as key-value pairs.
• Data stored in localStorage must be a string. Use JSON.stringify() to save objects/arrays and JSON.parse() to retrieve them.
• Use a useEffect hook with an empty dependency array ([]) to load data from localStorage when the component first mounts.
• Always update localStorage whenever the state it's supposed to persist changes (e.g., after adding or removing a favorite).

With this project complete, you have a solid foundation in React fundamentals. In the next module, "Advanced React: Routing and State Management," we'll start by learning how to create multi-page applications using React Router. This will enable us to build more complex UIs with distinct pages and navigation, all without the browser doing a full-page reload.