El localStorage

localStorage es una API en JavaScript que permite almacenar datos de manera persistente en el navegador del usuario. Los datos almacenados en localStorage permanecen incluso si el navegador se cierra y se vuelve a abrir. Es útil para guardar pequeñas cantidades de información que necesitas conservar entre sesiones del usuario, como preferencias de usuario, configuraciones, o estado de la aplicación.

1. Características de localStorage #

Laboratorio: persistencia y conversión de objetos #

Guarda tus propias preferencias, recarga la página y recupéralas con Leer.
Compara localStorage con sessionStorage, inspecciona el texto JSON y prueba
qué ocurre cuando no se puede convertir de vuelta a un objeto. El laboratorio
usa una clave propia y no modifica las preferencias de la plataforma.

Clave: aprendetu:simulators:storage-lab:v1
Texto observado: null (sin dato observado)

localStorage.setItem(clave, JSON.stringify(objeto));
const texto = localStorage.getItem(clave);
const objeto = texto === null ? null : JSON.parse(texto);

• Persistencia: Los datos guardados en localStorage no se eliminan al cerrar el navegador.
• Almacenamiento clave-valor: localStorage almacena datos en pares clave-valor, donde ambos son cadenas de texto.
• Capacidad: Tiene una capacidad limitada (generalmente alrededor de 5MB por dominio).

¿Cómo se usa localStorage? #

Las operaciones básicas con localStorage son guardar datos, recuperar datos, y eliminar datos.

1. Guardar datos: Usando localStorage.setItem(clave, valor).

   • clave: El nombre bajo el cual se almacena el valor.
   • valor: El valor que se almacena, que debe ser una cadena de texto.

   Ejemplo:

   1localStorage.setItem('nombre', 'Juan');

2. Recuperar datos: Usando localStorage.getItem(clave).

   • clave: El nombre de la clave cuyo valor deseas recuperar.

   Ejemplo:

   1let nombre = localStorage.getItem('nombre');
   2console.log(nombre); // Muestra "Juan"

3. Eliminar datos: Usando localStorage.removeItem(clave).

   • clave: El nombre de la clave que deseas eliminar.

   Ejemplo:

   1localStorage.removeItem('nombre');

4. Eliminar todos los datos: Usando localStorage.clear().

   • Elimina todos los datos almacenados en localStorage para ese dominio.

   Ejemplo:

   1localStorage.clear();

Trabajar con objetos en localStorage #

Como localStorage solo almacena cadenas de texto, si deseas almacenar objetos, debes convertirlos en una cadena de texto usando JSON.stringify() y luego convertirlos de nuevo en un objeto usando JSON.parse() cuando los recuperes.

Ejemplo: