✨ ¿Qué son localStorage y sessionStorage?
En JavaScript, tanto localStorage como sessionStorage son interfaces para almacenar datos clave-valor en el navegador. Ambas ofrecen una forma sencilla de guardar información, pero tienen diferencias clave en su funcionamiento.
🔎 Diferencias Principales: Tabla Comparativa (Vertical)
Persistencia
localStorage: Los datos persisten incluso después de cerrar el navegador o reiniciar el dispositivo.sessionStorage: Los datos se eliminan cuando se cierra la pestaña o ventana del navegador.
Capacidad
localStorage: Generalmente hasta 5MB por dominio.sessionStorage: Generalmente hasta 5MB por dominio.
Acceso entre pestañas
localStorage: Compartido entre todas las pestañas del mismo dominio.sessionStorage: Único para cada pestaña o ventana.
API
- Ambos: Igual para ambos (
setItem, getItem, etc.).
🔄 Cómo Usarlos
🔒 Uso de localStorage
1
2
3
4
5
6
7
8
9
10
11
12
| // Guardar un valor
localStorage.setItem('nombre', 'Juan');
// Recuperar un valor
const nombre = localStorage.getItem('nombre');
console.log(nombre); // Output: "Juan"
// Eliminar un valor
localStorage.removeItem('nombre');
// Limpiar todo el almacenamiento
localStorage.clear();
|
🔒 Uso de sessionStorage
1
2
3
4
5
6
7
8
9
10
11
12
| // Guardar un valor
sessionStorage.setItem('sessionId', 'abc123');
// Recuperar un valor
const sessionId = sessionStorage.getItem('sessionId');
console.log(sessionId); // Output: "abc123"
// Eliminar un valor
sessionStorage.removeItem('sessionId');
// Limpiar todo el almacenamiento
sessionStorage.clear();
|
🔨 Ejemplo Práctico: Guardar Preferencias de Usuario
Supongamos que quieres guardar el tema oscuro como preferencia del usuario:
🔒 Con localStorage
1
2
3
4
5
6
| // Guardar preferencia
localStorage.setItem('tema', 'oscuro');
// Leer preferencia
const tema = localStorage.getItem('tema');
document.body.classList.add(tema);
|
🔒 Con sessionStorage
1
2
3
4
5
6
| // Guardar preferencia
sessionStorage.setItem('tema', 'oscuro');
// Leer preferencia
const tema = sessionStorage.getItem('tema');
document.body.classList.add(tema);
|
🔧 Cuándo Usar Cada Uno
- Usa
localStorage para datos que deben persistir más allá de la sesión del navegador, como configuraciones de usuario o tokens de autenticación. - Usa
sessionStorage para datos temporales que solo necesitan estar disponibles durante la sesión actual, como identificadores de sesión o datos específicos de una pestaña.
