Gestión de Películas Favoritas con Local Storage en JavaScript

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:0018:17

Gestión de Películas Favoritas con Local Storage en JavaScript

Curso de API REST con Javascript: Performance y Usabilidad

Clase 17 de 20

Clase 17 / 20

Recursos

Mostrar la lista de películas favoritas en una app con JavaScript implica leer el objeto guardado en localStorage, convertirlo en array y renderizarlo en el DOM. Esta guía explica cómo lograrlo, sincronizar el estado visual de los botones de like y resolver los errores de navegación que aparecen cuando agregas una nueva sección al HTML.

Cómo leo las películas favoritas desde localStorage

La idea es replicar la lógica de funciones como getTrendingMovies o getMoviesBySearch, pero en vez de consumir una API, consumimos localStorage.

Para empezar, creas una función getLikedMovies que invoca a la función likedMoviesList, la cual hace JSON.parse de lo que viene guardado y devuelve un objeto con cada película indexada por su id.

¿Cómo convierto un objeto de localStorage en un array? Usa Object.values(miObjeto). Ese método devuelve un array con todos los valores del objeto, ignorando las llaves, listo para iterarlo o pasarlo a una función de renderizado.

Una vez tienes el array, lo pasas a createMovies junto con el contenedor, el flag de lazy loading y el flag para limpiar el HTML previo:

El array de películas viene de Object.values(likedMovies).
El contenedor es el nodo likedMoviesListArticle seleccionado con document.querySelector.
Lazy loading en true por si la lista crece.
Limpieza del contenedor en true para evitar duplicados al recargar.

Un detalle fácil de pasar por alto: al definir el selector en el archivo de nodos, el querySelector necesita el punto inicial para clases (.liked-movies-list) o el # para IDs. Sin ese punto, recibes el clásico error Cannot read properties of null (reading 'innerHTML').

Por qué los botones de like se ven desincronizados al recargar

Cuando recargas la página, los botones de corazón pierden la clase movie-button-liked porque el DOM se reconstruye desde cero. Aunque la información persiste en localStorage, la UI no la refleja hasta que la consultas explícitamente al pintar cada tarjeta.

Cómo sincronizo el estado visual del botón con localStorage

Dentro de la función createMovies, justo donde defines el botón de like, agregas un condicional que pregunta si el id de esa película existe en el objeto que devuelve likedMovieList():

javascript if (likedMovieList()[movie.id]) { movieBtn.classList.add('movie-button-liked'); }

Aquí no usas toggle, porque toggle invierte el estado. Lo que necesitas es solo añadir la clase cuando la película ya esté guardada. El toggle se queda únicamente para el event listener del clic, donde sí queremos alternar.

¿Qué hace Object.values en JavaScript? Recibe un objeto y devuelve un array con todos sus valores, en el orden en que fueron declarados. Es la forma más limpia de iterar valores de un objeto sin tocar las claves.

Cómo arreglo la navegación entre secciones

Al agregar la sección de favoritos al HTML, esta aparece en todas las rutas porque nunca le aplicas la clase inactive. La solución vive en navigation.js.

Primero, declaras el nodo en el archivo de selectores:

likedMoviesSection apunta al elemento con id liked.
Lo importas en navigation.js junto con el resto.
Replicas la misma lógica de add y remove que ya usas para trendingPreviewSection.

La regla práctica: cada vez que trendingPreviewSection recibe classList.remove('inactive') (en homePage), también se lo quitas a likedMoviesSection. Y cada vez que se lo agregas en categoriesPage, movieDetailsPage, searchPage o trendsPage, repites el add('inactive') para favoritos.

Con eso, la sección de películas favoritas solo aparece en el home y desaparece en categorías, búsqueda, tendencias y detalle de película.

Cómo escucho cambios de localStorage en tiempo real

Queda un detalle: si das like desde la página de tendencias sin navegar a otra ruta, la lista de favoritos del home no se actualiza hasta que recargas o cambias de sección. La razón es que getLikedMovies solo se ejecuta cuando se llama a homePage.

La solución es escuchar el evento storage del objeto window. Funciona como cualquier otro event listener:

javascript window.addEventListener('storage', getLikedMovies);

Cada vez que algo cambie en localStorage, el evento se dispara y vuelves a renderizar la lista. La documentación de MDN sobre Storage Event es la referencia recomendada para profundizar.

¿Cuándo se dispara el evento storage en JavaScript? Se dispara cuando otro documento del mismo origen modifica localStorage o sessionStorage. En la misma pestaña que hace el cambio puede no dispararse, así que a veces conviene emitir un evento personalizado tras escribir.

Qué aprendiste sobre persistencia y DOM en esta práctica

Resolver este flujo te entrena en habilidades concretas:

Manipulación del DOM con querySelector y respeto a la sintaxis de selectores CSS.
Persistencia con localStorage usando JSON.parse y JSON.stringify.
Conversión de objetos a arrays con Object.values para reutilizar funciones de renderizado.
Control de visibilidad de secciones mediante una clase inactive y event listeners de navegación.
Sincronización de estado visual con datos persistidos al cargar la página.

El reto abierto es claro: implementa el event listener de storage para que la lista de favoritos se actualice sin recargar ni navegar. Cuéntame en los comentarios qué nombre le habrías puesto al nodo likedMoviesListArticle y cómo resolviste la actualización en tiempo real.

Axel Enrique Galeed Gutierrez

Hace 4 años

Guardar favoritos en la API de TMDB

Les comparto la forma de agregar y eliminar las películas de favoritos usando la API de TMDB V3. Les dejo el código utilizando Axios como fetch. 😀

Recuerden leer siempre la documentación de la API atentamente, así no tienen dólares de cabeza como yo los tuve. 😅

fetch

Obtener request_token

const getRequestToken = async () => {
	const REQUEST_TOKEN_URL = 'authentication/token/new';
	const init = {
		method  : 'GET',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		}
	};
	const RESPONSE = await fetch(`${URL}/${REQUEST_TOKEN_URL}?api_key=${YOUR_API_KEY}`, init);
	const DATA = await RESPONSE.json();
	const REQUEST_TOKEN = DATA.request_token;

	return REQUEST_TOKEN;
};

Obtener session_id

Antes de obtener nuestro session_id tenemos que aceptar la autenticación de terceros desde nuestra cuenta de TMDB, lo realizamos desde la siguiente URL

www.themoviedb.org/authenticate/{your_request_token}.

Una vez aceptado ya podés seguir con el siguiente código.

const getSession = async () => {
	const SESSION_ID_URL = 'authentication/session/new';
	const request_token = 'your_request_token';
	const REQUEST_BODY = JSON.stringify({
		request_token
	});
	const init = {
		method  : 'POST',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		},
		body : REQUEST_BODY
	};
	// *Tenemos que aceptar, en nuestra cuenta de The Movie DB, la autenticación de terceros en https://www.themoviedb.org/authenticate/{request_token}
	const RESPONSE = await fetch(`${URL}/${SESSION_ID_URL}?api_key=${YOUR_API_KEY}`, init);
	const DATA = await RESPONSE.json();
	const SESSION_ID = DATA.session_id;

	return SESSION_ID;
};

Obtener account_id

const getAccountId = async () => {
	const SESSION_ID = 'your_session_id';
	const ACCOUNT_URL = 'account';
	const init = {
		method  : 'GET',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		},
	};
	const RESPONSE = await fetch(`${URL}/${ACCOUNT_URL}?api_key=${YOUR_API_KEY}&session_id=${SESSION_ID}`, init);
	const ACCOUNT = await RESPONSE.json();
	const ID = ACCOUNT.id;

	return ID;
};

Agregar o eliminar una película de favoritos

El parámetro favorite(boolean) es el que nos permite agregar o eliminar una película de favoritos.

favorite = true add movie.

favorite = false remove movie.

const addOrDeleteFavoriteMovie = async ({ media_id, remove = false }) => {
	// Si queremos eliminar la película de favoritos tenemos que pasar el parámetro favorite = false;
	const SESSION_ID = 'your_session_id';
	const media_type = 'movie';
	const favorite = !remove;
	const ACCOUNT_ID = await getAccountId();
	const REQUEST_BODY = JSON.stringify({
		media_type,
		media_id,
		favorite
	});
	const init = {
		method  : 'POST',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		},
		body : REQUEST_BODY
	};
	const RESPONSE = await fetch(`${URL}/account/${ACCOUNT_ID}/favorite?api_key=${YOUR_API_KEY}&session_id=${SESSION_ID}`, init);
	const STATUS = await RESPONSE.json();

	return STATUS;
};

Ver las películas guardadas

const getFavoriteMovies = async () => {
	const SESSION_ID = 'your_session_id';
	const ACCOUNT_ID = await getAccountId();
	const init = {
		method  : 'GET',
		headers : {
			'Content-Type' : 'application/json;charset=utf-8'
		}
	};
	const RESPONSE = await fetch(`${URL}/account/${ACCOUNT_ID}/favorite/movies?api_key=${YOUR_API_KEY}&session_id=${SESSION_ID}`);
	const DATA = await RESPONSE.json();
	const MOVIES = DATA.results;

	return MOVIES;
};

Axios

Una cosa para aclarar, el parámetro params son los query parameters y nuestro parámetro data es el body que utilizamos con fetch.

Creando instancia para usar la API

const config = {
	baseURL : 'https://api.themoviedb.org/3/',
	headers : {
		'Content-Type' : 'application/json;charset=utf-8'
	},
	params : {
		api_key : YOUR_API_KEY
	}
};

const api = axios.create(config);

Obtener request_token

const getRequestToken = async () => {
	const RESPONSE = await api('authentication/token/new');
	const DATA = RESPONSE.data;
	const REQUEST_TOKEN = DATA.request_token;

	return REQUEST_TOKEN;
};

Obtener session_id

Antes de obtener nuestro session_id tenemos que aceptar la autenticación de terceros desde nuestra cuenta de TMDB, lo realizamos desde la siguiente URL

www.themoviedb.org/authenticate/{your_request_token}.

Una vez aceptado ya podés seguir con el siguiente código.

const getSession = async () => {
	const request_token = 'your_request_token';
	const config = {
		params : { request_token }
	};
	// *Tenemos que aceptar, en nuestra cuenta de The Movie DB, la autenticación de terceros en https://www.themoviedb.org/authenticate/{request_token}
	const RESPONSE = await api('authentication/session/new', config);
	const DATA = RESPONSE.data;
	const SESSION_ID = DATA.session_id;

	return SESSION_ID;
};

Obtener account_id

const getAccountId = async () => {
	const session_id = 'your_session_id';
	const config = {
		params : { session_id }
	};
	const RESPONSE = await api('account', config);
	const ACCOUNT = RESPONSE.data;
	const ID = ACCOUNT.id;

	return ID;
};

Agregar o eliminar una película de favoritos

El parámetro favorite(boolean) es el que nos permite agregar o eliminar una película de favoritos.

favorite = true add movie.

favorite = false remove movie.

const addOrDeleteFavoriteMovie = async ({ media_id, remove = false }) => {
	// Si queremos eliminar la película de favoritos tenemos que pasar el parámetro favorite = false;
	const session_id = 'your_request_token';
	const media_type = 'movie';
	const favorite = !remove;
	const ACCOUNT_ID = await getAccountId();
	const config = {
		method : 'POST',
		params : { session_id },
		data   : {
			media_type,
			media_id,
			favorite
		}
	};
	const RESPONSE = await api(`account/${ACCOUNT_ID}/favorite`, config);
	const STATUS = RESPONSE.data;

	return STATUS;
};

Ver las películas guardadas

const getFavoriteMovies = async () => {
	const session_id = 'your_request_token';
	const ACCOUNT_ID = await getAccountId();
	const config = {
		params : { session_id }
	};
	const RESPONSE = await api(`account/${ACCOUNT_ID}/favorite/movies`, config);
	const DATA = RESPONSE.data;
	const MOVIES = DATA.results;

	return MOVIES;
};

PD: No puedo dejar los links directos a la explicación de cada sección de la página de TMDB, ya que el sistema de comentarios lo detecta como “enlace malicioso”. Si quieren mayor detalles, pueden ver directo en la página de la API.

Comentarios (38)38 comentarios

Dario Paladines

Raycris Maldonado

Luis Alejandro Vera Hernandez

Jonathan Alfonso

Juan Castro

Profesor

Walter Llanos

Hace 3 años

Enrique Aguilera

Víctor Fabián Morales Rodríguez

Lautaro Strappazzon

Daniel González

Leonard Sumoza

fabio andres zamora osorio

Fernando Yutiz

Ricardo Alfonso Chavez Vilcapoma

Juan Cortez

Alonso Chaves

Johnner Alexander Gambacica Ortiz

Leonardo Jaimovich

Sergio Javier Lopez Olivera

Luis Paredes

Marcelo Jorge Bellizia

CRISTIAN DARIO AGUDELO PORRAS

Jose Ever Muñoz Muñoz

Daniel Rodriguez

Manuel Araujo

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

Optimización y despliegue de Platzi Movies

Caché vs memoization en APIs REST

Caché del navegador vs memoization en APIs

Optimización de imágenes

Spinners vs Skeletons en pantallas de carga

Loading skeletons con CSS y keyframes

Lazy loading con IntersectionObserver

Implementación de Lazy Loading con Intersection Observer

Fallback de imágenes con evento error en JS

Paginación

Paginación vs Scroll Infinito en tu App

Paginación con botón antes del infinite scroll

Infinite Scroll sin botón en JS vanilla

Límite de páginas en infinite scroll con APIs

Closures para infinite scroll en múltiples rutas

Almacenamiento local

Almacenamiento Local con Local Storage en JavaScript

Botón de like sobre pósters con CSS y JS

Guardar películas favoritas con localStorage

Gestión de Películas Favoritas con Local Storage en JavaScript

Bonus

Selección de idioma con navigator.language

Despliegue Seguro de Aplicaciones Web y Protección de API Keys

Próximos pasos

Cierre y próximos pasos con tu portafolio

Gestión de Películas Favoritas con Local Storage en JavaScript

Progreso del curso

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

Optimización de imágenes

Paginación

Almacenamiento local

Bonus

Próximos pasos

Recursos

Recursos