Local Storage vs. API real

Curso de API REST con Javascript: Performance y Usabilidad

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

Tu responsabilidad como frontend developer

Caché vs. memoria

Debuggeando caché y networking

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

Optimización de imágenes

Loading spinners vs. loading skeletons

Reto: pantalla de carga

Intersection Observer

Lazy Loading

Imágenes por defecto

Quiz: Optimización de imágenes

Paginación

Scroll infinito vs. paginación

Botón de cargar más

Infinite Scrolling: evento de scroll

Infinite Scrolling: limitando la carga de datos

Infinite Scrolling: closures de navegación

Quiz: Paginación

Almacenamiento local

Local Storage vs. API real

Botón de like

Guardando películas en Local Storage

Lista de películas favoritas

Quiz: Almacenamiento local

Bonus

Reto: selección de idioma

Deploy

Próximos pasos

Más proyectos para tu portafolio

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

What is local storage in browsers?

Local storage, known as Local Storage, is a powerful JavaScript tool that is available in our web browsers such as Google Chrome, Firefox, Safari, among others. This storage allows data to be stored directly in each user's browser, thus providing an offline experience by not relying on Internet connection and backend response.

When is it appropriate to use Local Storage?

It is crucial to identify which scenarios are ideal for the use of Local Storage over a real API. Some of the cases where Local Storage is beneficial include:

Speed of access: Data in Local Storage is immediately available, as it is stored in the user's browser.
Backend Independence: You can avoid backend overhead and have full control over how data is handled and processed.
No need for authentication: Local Storage stores data that does not require authentication processes to access, such as user preferences in non-sensitive configurations.

What are the disadvantages of using Local Storage?

Despite its advantages, it is important to keep in mind significant limitations that come with using Local Storage:

Lack of synchronization between devices: Data saved in the browser is not shared between devices. A piece of data saved on a user's computer will not be available on their mobile or tablet.
Limited security: Private or sensitive information (such as passwords, tokens or API keys) should not be stored due to security risks. Users can access browser data using tools such as the item inspector.
Browser dependency: Although highly unlikely, some disruptive change in browsers could affect Local Storage support.

When is it preferable to use a real API?

There are situations where the use of a real API is more appropriate:

Cross-device interoperability: a real API allows users to access their data from different devices, as long as they authenticate.
Advanced authentication: Applications that require strong authentication should use methods such as OAuth 2.0 to manage authorizations and user sessions via an API.
Secure storage: It is recommended that sensitive data be stored on the backend, ensuring that only authorized users can access it.

Conclusion on the use of Local Storage and APIs

While Local Storage provides advantages in terms of speed and simplicity for non-sensitive data, the actual APIs offer security, confidentiality and advanced data synchronization. Ultimately, the choice of one over the other will depend on the specific needs of the application and the data it handles. We encourage further exploration and learning about these mechanisms to maximize the effectiveness of your web developments.

Contributions 3

Questions 5

Sort by:

Want to see more contributions, questions and answers from the community?

MyOwnByte

3 years ago

Para complementar este tema, existe tambien la posibilidad de guardar en Session Storage en el navegador(Hasta 5mb). A diferencia del local storage, la informacion guardada en el session storage se pierde cada vez que el usuario cierra el tab del browser.
Y desde ya, el otro mecanismo para guardar datos del lado del cliente son las cookies, aunque no se puede almacenar mas de 4Kb

Fernando Yutiz

3 years ago

JuanDC, lo que comentas en el minuto 5 sobre que el local storage no se replica en otros navegadores de otros dispositivos del mismo usuario, esto seria aunque se tenga activada la sincronización del navegador?

Henry Alexander Velásquez Rosas

10 months ago

\### 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.