CodingNic

Persist the Wishlist and Load Saved Movies

Keep Saved Movies After Refresh and Build the Wishlist Page

Persist the Wishlist and Load Saved Movies 4 min read

Keep Saved Movies After Refresh and Build the Wishlist Page

Keep Saved Movies After Refresh and Build the Wishlist Page

The wishlist now works during the current session, but a refresh resets it. In this module you will complete the browser persistence lifecycle and then build the /wishlist page that turns saved ids back into real movie cards.

The persistence work belongs in the wishlist context because that component owns the ids. You will load the stored value when the browser is ready, delay writes until that initial read has finished, and keep the state safe when storage contains malformed data. This is a small but important server/client boundary: localStorage exists in the browser, not during server rendering.

Once the ids survive a refresh, the wishlist page needs actual movie data. Rather than storing full movie objects in localStorage, the app stores only ids and asks the server for the current movie summaries. That keeps browser state small and lets TMDB remain the source of truth for movie details.

By the end of the module, saved ids survive refreshes, /wishlist shows real movie cards, empty and loading states are handled, and the app has the data flow needed for a device-local wishlist. The internal server route will be built in the next module.