Almacenamiento Local 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:0010:01

Almacenamiento Local con Local Storage en JavaScript

Curso de API REST con Javascript: Performance y Usabilidad

Clase 14 de 20

Clase 14 / 20

Recursos

Saber elegir entre localStorage y una API real puede marcar la diferencia entre una aplicación rápida y práctica o una vulnerable y difícil de mantener. A continuación se explican las características, ventajas y limitaciones de cada enfoque, junto con las buenas prácticas que debes tener en cuenta antes de implementar cualquiera de las dos opciones en tus proyectos de frontend.

¿Qué es localStorage y por qué es tan rápido?

localStorage es una herramienta que ofrecen todos los navegadores modernos —Google Chrome, Firefox, Safari, entre otros— para guardar información directamente en el dispositivo del usuario [0:20]. A diferencia de una API Rest, no necesitas conexión a Internet, no dependes de que el backend responda rápido ni de bases de datos externas. La información se almacena tal cual en el navegador y carga prácticamente al instante [1:02].

Al depender del navegador, tienes control completo desde el frontend sobre cómo se guarda, se consulta y se estructura la información [3:08]. No sigues las reglas, nomenclaturas ni endpoints que define un equipo de backend. Esa independencia es útil, aunque implica que tú mismo diseñas las convenciones de almacenamiento.

Una práctica recomendable es mantener tu código desacoplado: que la capa que recibe los datos no distinga si provienen de localStorage o de una API Rest [2:48]. Así, si más adelante migras a un backend, el cambio será mínimo.

¿Se puede evitar la autenticación con localStorage?

Sí. Cuando guardas datos en localStorage, la información pertenece automáticamente al navegador de cada persona [3:55]. No necesitas saber si el usuario es "Fulanito" o "Juana María" porque cada navegador aísla sus propios datos. Esto permite implementar funcionalidades —como una lista de películas favoritas— sin flujos de autenticación [3:38].

Sin embargo, esa ventaja tiene un límite importante: no puedes recuperar la sesión entre dispositivos [4:38]. Si guardas películas favoritas en tu computador y luego abres la aplicación desde tu celular, la información no estará ahí. Cada dispositivo tiene su propio navegador y, por lo tanto, su propio localStorage independiente.

¿Qué datos nunca debes guardar en localStorage?

Este es uno de esos casos donde las buenas prácticas casi no dependen del contexto: jamás guardes información privada en localStorage [5:14]. Nada de tokens, API keys ni contraseñas. Todo lo que esté en el navegador es visible desde el inspector de elementos o herramientas más avanzadas.

Si necesitas almacenamiento temporal y algo más seguro, puedes usar sessionStorage [5:44], que borra la información en cuanto se cierra el navegador. Pero para datos realmente sensibles, la respuesta siempre es un backend con autenticación adecuada.

¿Cuándo es mejor usar una API real?

Una API Rest es más lenta porque depende de la conexión a Internet, la velocidad del backend y las bases de datos [6:20]. Además, ese rendimiento está fuera de tu control como desarrollador frontend. Mientras la petición tarda, tu responsabilidad es ofrecer una experiencia tolerable al usuario: loading states, skeletons o animaciones.

¿Por qué la autenticación exige un backend?

Cuando una funcionalidad requiere saber quién es el usuario, necesitas un flujo completo de autenticación. Protocolos como OAuth 2.0 [6:55] implican que el backend genera un token, el frontend lo envía en cada petición y se refresca periódicamente. Es un trabajo compartido entre ambos equipos.

A cambio, una API real te ofrece dos ventajas cruciales:

Recuperación de sesión entre dispositivos. No importa si entras desde tu laptop o tu celular; el backend siempre devuelve tu información [7:17].
Seguridad para datos privados. La información sensible vive en el servidor y solo llega al frontend después de validar la identidad del usuario [7:40].

¿Cómo aplicar localStorage en un proyecto real?

Un ejemplo práctico es la funcionalidad de películas favoritas usando la API de The Movie DB [8:12]. Aunque esa API permite guardar favoritos, requiere tanto application based authentication como user based authentication [8:30]. Para evitar esa complejidad, se puede usar localStorage: cada usuario marca sus películas favoritas y estas se guardan directamente en su navegador.

Esta decisión ilustra perfectamente el criterio de cuándo usar cada herramienta:

La información no es privada.
No se necesita compartir entre dispositivos.
Se evita un flujo de autenticación completo.

Si en tu próximo proyecto te enfrentas a una decisión similar, pregúntate: ¿los datos son sensibles?, ¿el usuario necesita acceder desde varios dispositivos?, ¿puedo prescindir de autenticación? Las respuestas te indicarán si localStorage es suficiente o si necesitas una API real. Comparte en los comentarios cómo has resuelto este dilema en tus propias aplicaciones.

Henry Alexander Velásquez Rosas

Hace 2 años

### Local Storage vs. API real

**Local Storage** y **API real** son dos métodos comúnmente utilizados en aplicaciones web para almacenar y recuperar datos. Ambos tienen sus propias ventajas y desventajas y se usan en diferentes contextos dependiendo de los requisitos de la aplicación. Aquí hay una comparación de ambos:

### Local Storage

**Local Storage** es una característica del navegador web que permite almacenar datos en el cliente de manera persistente. Los datos almacenados en Local Storage no se eliminan cuando se cierra el navegador, lo que lo hace útil para guardar información que necesita persistir entre sesiones del usuario.

#### Ventajas de Local Storage

1. **Persistencia**: Los datos almacenados en Local Storage persisten incluso después de cerrar el navegador.

2. **Fácil de usar**: La API de Local Storage es simple y directa, con métodos como setItem, getItem, removeItem, y clear.

3. **Rápido acceso**: Los datos están almacenados localmente, lo que permite un acceso rápido sin necesidad de realizar una llamada a un servidor.

4. **Independencia de red**: No requiere conexión a Internet para acceder a los datos almacenados.

#### Desventajas de Local Storage

1. **Capacidad limitada**: Generalmente, los navegadores limitan Local Storage a unos pocos megabytes.

2. **Seguridad**: Los datos almacenados en Local Storage no están encriptados, lo que significa que pueden ser vulnerables a ataques si no se manejan adecuadamente.

3. **Sin sincronización**: Los datos no se sincronizan automáticamente entre diferentes dispositivos o sesiones de navegador.

4. **Solo strings**: Local Storage solo almacena datos en formato de string, lo que significa que otros tipos de datos deben ser convertidos a string (por ejemplo, usando JSON).

### API Real

Una **API real** (Application Programming Interface) se refiere a un servicio remoto que permite a una aplicación web interactuar con un servidor para almacenar y recuperar datos. Esto suele involucrar el uso de HTTP(S) para comunicarse con un servidor backend.

#### Ventajas de una API real

1. **Capacidad ilimitada**: En teoría, no hay límite en la cantidad de datos que se pueden almacenar en el servidor.

2. **Seguridad**: Los datos pueden ser encriptados y protegidos por medidas de seguridad robustas en el servidor.

3. **Sincronización**: Los datos pueden ser accedidos y actualizados desde múltiples dispositivos y sesiones de navegador, manteniéndose sincronizados.

4. **Datos complejos**: Las APIs pueden manejar datos complejos y estructurados, no limitados a strings.

#### Desventajas de una API real

1. **Dependencia de red**: Requiere una conexión a Internet para acceder a los datos.

2. **Latencia**: Acceder a datos a través de una red puede ser más lento que acceder a datos almacenados localmente.

3. **Complejidad**: Configurar y mantener una API real puede ser más complejo que usar Local Storage, especialmente en términos de manejo de seguridad y escalabilidad.

4. **Costos**: Ejecutar un servidor y manejar una base de datos puede incurrir en costos adicionales.

### Cuándo usar cada uno

**Local Storage** es ideal para:

- Almacenar configuraciones y preferencias del usuario.

- Datos que necesitan persistir entre sesiones del navegador pero no requieren sincronización entre dispositivos.

- Aplicaciones simples que no necesitan interactuar con un servidor backend.

**API real** es ideal para:

- Aplicaciones que requieren persistencia y sincronización de datos en múltiples dispositivos.

- Almacenamiento de grandes volúmenes de datos.

- Aplicaciones que necesitan manejar datos sensibles y requieren medidas de seguridad avanzadas.

- Funcionalidades complejas que necesitan comunicación continua con un servidor backend.

En resumen, la elección entre Local Storage y una API real depende de las necesidades específicas de tu aplicación, incluyendo el tipo de datos que manejas, los requisitos de persistencia, la necesidad de sincronización y las consideraciones de seguridad.

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

Almacenamiento Local 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