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

¿Cómo mostrar las películas favoritas guardadas en Local Storage?

Para mostrar las películas favoritas que hemos guardado en Local Storage, primero debemos asegurarnos de poder manipular eficazmente los datos almacenados. Seguiremos un proceso detallado para obtener y presentar estas películas en la interfaz de usuario. Aquí te explico cómo hacerlo de manera sencilla y paso a paso.

¿Cómo crear la función getLikedMovies?

La funcionalidad clave es crear una función que nos permita leer desde el Local Storage y mostrar esa información en nuestro HTML. Esta función será similar a las que usamos para obtener datos de una API.

function getLikedMovies() {
    const likedMovies = likedMoviesList(); // obtenemos la lista de películas de Local Storage
    const moviesArray = Object.values(likedMovies); // convertimos el objeto en un array
    createMovies(moviesArray, likedMoviesListArticle, true, true); // mostramos las películas en el HTML
}

¿Cómo convertimos objetos en arrays?

Dado que Local Storage almacena datos en forma de cadena de texto, es esencial convertir estos datos de nuevo a objetos y luego a arrays para manipularlos fácilmente.

• Utilizamos Object.values() para convertir un objeto con nuestras películas en un array que pueda ser manipulado con métodos de array como map, forEach, etc.

¿Cómo integrar la función en el flujo del frontend?

Una vez que tenemos la función que obtiene nuestras películas favoritas, debemos integrarlas en las vistas adecuadas de nuestra aplicación. Esto se hace añadiendo la lógica de llamado dentro de nuestra función de navegación principal para que se ejecute cuando sea necesario.

function homePage() {
    getCategoriesPreview();
    getTrendingMoviesPreview();
    getLikedMovies(); // Llama a la función cada vez que se renderiza el Home
}

¿Cómo sincronizar el estado de los botones de "Me gusta"?

Sincronizar estos botones es crucial para mantener la coherencia visual en la aplicación, indicándole al usuario si una película ya ha sido marcada como "favorita" previamente.

¿Cómo determinar el estado del botón de "Me gusta"?

Podemos utilizar una verificación condicional que consulte Local Storage cada vez que cargamos la lista de películas para ver si una película ya ha sido marcada como "Me gusta". Esto actualizará el estado del botón correctamente.

if (likedMoviesList()[movie.id]) {
    movieButton.classList.add('liked'); // añade clase si la película ya está en favoritos
}

De esta manera, al cargar las películas, automáticamente se reflejará su estado actual respecto a si son favoritas o no, proporcionando una experiencia de usuario fluida e intuitiva.

¿Cuál es el reto adicional con Local Storage?

Si bien nuestra aplicación está casi completa, aún existe el desafío de que al agregar o quitar una película de favoritos desde una vista y mantenerse en la misma, no actualiza inmediatamente el estado visual. Este reto se puede solucionar implementando un custom event listener que dispare una acción cada vez que se detecte un cambio en Local Storage.

¿Cómo usar un EventListener para cambios en Local Storage?

Podemos usar el evento storage para escuchar cualquier cambio realizado en Local Storage y así volver a cargar nuestros datos de películas favoritas.

window.addEventListener('storage', () => {
    getLikedMovies(); // vuelve a cargar las películas favoritas inmediatamente
});

Con esto, aseguramos la sincronización en tiempo real de la interfaz de usuario con el estado de los datos de Local Storage.

Finalmente, aunque el reto principal ya está solucionado, siempre es recomendable seguir explorando formas de mejorar y optimizar la aplicación. Anímate a seguir experimentando y compartiendo tus avances y preguntas con la comunidad para lograr una aplicación robusta y dinámica.