Introducción: localStorage en JavaScript

En un artículo anterior, exploramos cómo determinar si el modo oscuro está activado en una página web y cómo guardar esta preferencia del usuario. Para lograr esto, utilizamos una funcionalidad clave de JavaScript llamada localStorage. En este artículo, profundizaremos en el concepto del localStorage y su importancia en el desarrollo web.

¿Qué es el localStorage?

El localStorage es un objeto de almacenamiento disponible en los navegadores web modernos que permite a los desarrolladores web almacenar datos de forma persistente en el navegador del usuario. A diferencia de las cookies, que tienen limitaciones de tamaño y se envían con cada solicitud HTTP, el localStorage ofrece una mayor capacidad de almacenamiento y los datos almacenados no se envían automáticamente con cada solicitud al servidor.

localStorage, JavaScript
https://github.com/MarAntBQ/ReactCourse/blob/master/06-proyecto1/src/helpers/GuardarEnStorage.js

¿Cómo se utiliza el localStorage?

El localStorage se utiliza mediante la API de almacenamiento web proporcionada por JavaScript. Permite almacenar datos en forma de pares clave-valor. Esto significa que cada pieza de información almacenada tiene una clave única que se utiliza para acceder a ella.

// Ejemplo de cómo almacenar datos en el localStorage
localStorage.setItem('nombre', 'Juan');
localStorage.setItem('edad', 30);

En el ejemplo anterior, estamos almacenando el nombre ‘Juan’ con la clave ‘nombre’ y la edad ’30’ con la clave ‘edad’ en el localStorage.

// Ejemplo de cómo recuperar datos del localStorage
let nombre = localStorage.getItem('nombre');
let edad = localStorage.getItem('edad');
console.log(nombre); // Output: Juan
console.log(edad); // Output: 3

Con getItem, podemos recuperar los valores almacenados previamente en el localStorage utilizando sus claves correspondientes.

¿Por qué es útil el localStorage?

El localStorage es útil para una variedad de propósitos en el desarrollo web. Algunos de los casos de uso comunes incluyen:

  1. Almacenamiento de preferencias del usuario: Como vimos anteriormente, el localStorage es ideal para almacenar las preferencias del usuario, como el modo oscuro, idioma preferido, etc.
  2. Persistencia de datos en la aplicación: Permite que las aplicaciones web almacenen datos localmente en el navegador del usuario, lo que facilita la recuperación de información cuando el usuario regresa a la aplicación en el futuro.
  3. Caché de datos: Los datos almacenados en el localStorage pueden utilizarse como una caché local para reducir las solicitudes al servidor y mejorar el rendimiento de la aplicación.
  4. Almacenamiento de tokens de autenticación: Los tokens de autenticación como los tokens JWT pueden almacenarse de forma segura en el localStorage para mantener al usuario autenticado entre sesiones.

En resumen, el localStorage es una característica poderosa de JavaScript que proporciona a los desarrolladores web la capacidad de almacenar datos de forma persistente en el navegador del usuario. Desde el almacenamiento de preferencias del usuario hasta la persistencia de datos en la aplicación, el localStorage desempeña un papel crucial en el desarrollo web moderno. Si aún no has explorado esta funcionalidad, te animo a que lo hagas y descubras su potencial en tus proyectos web.