Guardar películas favoritas con localStorage

Curso de API REST con Javascript: Performance y Usabilidad

Contenido del curso

No sé dónde empezar

Qué se debe optimizar en el frontend (y qué no)

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

20
Cierre y próximos pasos con tu portafolio
08:08 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0022:44

Guardar películas favoritas con localStorage

Curso de API REST con Javascript: Performance y Usabilidad

Clase 16 de 20

Clase 16 / 20

Recursos

Guardar datos en el navegador sin perderlos al recargar es uno de los superpoderes de localStorage en JavaScript. Aquí aprendes cómo leer, escribir y eliminar información, además de cómo manejar objetos y arrays usando JSON.stringify y JSON.parse para construir una lista de películas favoritas persistente.

Qué es localStorage y cómo funciona en el navegador

localStorage es una instancia del prototipo Storage que vive en el navegador y se comporta como un objeto con pares clave-valor. La gran diferencia con un objeto normal de JavaScript es que la información sobrevive a recargas e incluso al cierre del navegador, por eso se conoce como almacenamiento local o persistencia de datos [01:05].

No puedes asignar valores con sintaxis tipo localStorage.algo = "x". Tienes que usar sus métodos:

setItem(clave, valor) para guardar.
getItem(clave) para leer.
removeItem(clave) para eliminar.

¿Qué guarda localStorage? Solo strings. Si intentas guardar un objeto directamente, vas a leer "[object Object]" y perderás los datos originales.

Cómo escribir y leer datos con setItem y getItem

Para guardar un valor necesitas dos cosas: un nombre clave y el valor en string. Por ejemplo, localStorage.setItem("likedMovies", "hola") crea un ítem nuevo y al recargar la página sigue ahí [02:20]. Para leerlo usas localStorage.getItem("likedMovies") y te devuelve exactamente lo guardado, listo para asignarlo a una variable.

Si vuelves a llamar a setItem con la misma clave, el valor se actualiza. No hay versionado: lo último que guardes es lo que vas a leer.

Cómo guardar objetos y arrays en localStorage con JSON

Aquí viene lo interesante. Como localStorage solo entiende strings, necesitas dos funciones nativas de JavaScript para trabajar con estructuras complejas [04:30].

JSON.stringify(objeto) convierte un objeto o array en string.
JSON.parse(string) convierte ese string de vuelta en objeto o array de JavaScript.

¿Por qué localStorage no guarda objetos directamente? Porque su API solo acepta strings. Sin stringify el objeto se convierte en el texto literal "[object Object]" y pierdes la información.

Entonces el flujo correcto es: stringify antes de guardar, parse después de leer. Ese patrón se repite en cualquier app que use localStorage para guardar datos estructurados.

Cómo construir una función likeMovie con toggle de favoritos

La estrategia para guardar películas favoritas tiene una decisión de diseño importante. Podrías guardar un array de IDs y luego pedir cada película a la API, pero implica una solicitud HTTP por cada favorita. La alternativa es guardar un objeto donde cada clave es el ID de la película y el valor es el objeto completo con título, póster e información adicional [09:50].

Esta estructura tiene dos ventajas:

Búsqueda directa por ID sin recorrer arrays.
Toda la información disponible sin nuevas peticiones a la API.

Cómo verificar si una película ya está en localStorage

Primero creas una función auxiliar llamada likedMoviesList que centralice la lectura. Su trabajo es devolver siempre un objeto, incluso cuando localStorage esté vacío.

javascript function likedMoviesList() { const item = JSON.parse(localStorage.getItem("liked_movies")); let movies; if (item) { movies = item; } else { movies = {}; } return movies; }

Si getItem devuelve null (primera vez en la app), retornas {} para evitar errores al consultar propiedades [13:40]. Si ya hay datos guardados, los parseas y los devuelves listos para usar.

Cómo agregar o eliminar películas con un toggle

La función likeMovie(movie) recibe el objeto de la película y decide qué hacer según si ya estaba guardada:

javascript function likeMovie(movie) { const likedMovies = likedMoviesList(); if (likedMovies[movie.id]) { likedMovies[movie.id] = undefined; } else { likedMovies[movie.id] = movie; } localStorage.setItem("liked_movies", JSON.stringify(likedMovies)); }

La clave está en modificar el objeto en memoria y luego volver a guardarlo completo con setItem [17:20]. Para eliminar, asignas undefined (o usas delete); para agregar, asignas el objeto completo de la película usando movie.id como nombre de propiedad.

¿Cómo hago un toggle de favoritos? Lee el objeto de favoritos, pregunta si la clave existe, elimínala si está o agrégala si no, y guarda el objeto completo de vuelta con stringify.

Errores comunes al usar setItem con JSON.stringify

Dos errores aparecen casi siempre la primera vez que armas este flujo. El primero es olvidar el primer argumento de setItem: si solo le pasas el valor sin la clave, el navegador lanza two arguments required [20:15]. El segundo es intentar guardar el objeto sin convertirlo a string, lo que rompe la lectura posterior.

Una vez resuelto, al darle like a una película verás en DevTools > Application > Local Storage la clave liked_movies con un objeto que crece con cada favorita y se reduce cuando quitas el like. La información persiste tras recargar, justo lo que buscábamos.

Quedan dos detalles sueltos: pintar el corazón lleno cuando una película ya está guardada al recargar, y mostrar la lista de favoritas en la sección correspondiente. ¿Cómo resolverías tú la sincronización visual del estado liked? Cuéntame en los comentarios.