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.

Características de localStorage

• 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"

1<div id="value">
2   <!-- Aquí se mostrará el valor almacenado en localhost -->
3</div>

1localStorage.setItem('nombre', 'Juan');
2let nombre = localStorage.getItem('nombre');
3document.querySelector('#value').textContent = nombre;

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:

1<div id="value">
2   <!-- Aquí se mostrará el valor almacenado en localhost -->
3</div>

1let usuario = {
2nombre: 'Juan',
3edad: 30
4};
5// Guardar objeto en localStorage
6localStorage.setItem('usuario', JSON.stringify(usuario));
7
8// Recuperar objeto de localStorage
9let usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));
10document.querySelector('#value').textContent = usuarioGuardado.nombre;

Resumen

• localStorage es una API para almacenar datos de manera persistente en el navegador, incluso después de cerrar la pestaña o el navegador.
• Los datos se almacenan como pares clave-valor, donde tanto la clave como el valor son cadenas de texto.
• Puedes guardar, recuperar, eliminar datos específicos, o limpiar todo el almacenamiento de localStorage.
• Para almacenar objetos, es necesario convertirlos en cadenas de texto con JSON.stringify() y recuperarlos con JSON.parse().

localStorage es una herramienta poderosa para almacenar datos en el lado del cliente, especialmente útil para guardar configuraciones, preferencias de usuario, y otros datos que deben persistir entre sesiones del navegador.