Domina el almacenamiento web con localStorage y sessionStorage para crear experiencias persistentes en el navegador. Aprende técnicas seguras para guardar datos del usuario, preferencias y estado de aplicaciones.
Diagrama comparativo entre localStorage y sessionStorage
Contenido del Artículo
Conceptos Básicos
Diferencias clave entre localStorage y sessionStorage:
// Guardar datos
localStorage.setItem('usuario', JSON.stringify({
id: 1,
nombre: 'Carlos',
email: 'carlos@ejemplo.com'
}));
sessionStorage.setItem('token', 'abc123xyz');
// Leer datos
const usuario = JSON.parse(localStorage.getItem('usuario'));
const token = sessionStorage.getItem('token');
// Eliminar datos
localStorage.removeItem('usuario');
// Limpiar todo
sessionStorage.clear();Siempre serializa objetos con JSON.stringify() antes de guardar
| Característica | localStorage | sessionStorage |
|---|---|---|
| Persistencia | Persiste entre sesiones | Solo durante la sesión |
| Alcance | Mismo origen, todas pestañas | Mismo origen, misma pestaña |
| Capacidad | 5-10MB según navegador | 5-10MB según navegador |
| Acceso | window.localStorage | window.sessionStorage |
Casos de Uso Prácticos
Aplicaciones comunes para almacenamiento web:
Preferencias
Tema, idioma, configuraciones
Carritos
Guardar temporalmente compras
Formularios
Guardar progreso no enviado
Juegos
Progreso, puntuaciones
// Guardar preferencias de usuario
function guardarPreferencias(prefs) {
localStorage.setItem('preferencias', JSON.stringify(prefs));
}
// Cargar preferencias al inicio
function cargarPreferencias() {
const prefsGuardadas = localStorage.getItem('preferencias');
return prefsGuardadas ? JSON.parse(prefsGuardadas) : {};
}
// Autoguardado de formulario
const formulario = document.getElementById('miFormulario');
formulario.addEventListener('input', () => {
const datosFormulario = new FormData(formulario);
const datos = Object.fromEntries(datosFormulario);
sessionStorage.setItem('formularioAutoguardado', JSON.stringify(datos));
});
// Cargar al recargar
window.addEventListener('load', () => {
const datosGuardados = sessionStorage.getItem('formularioAutoguardado');
if (datosGuardados) {
const datos = JSON.parse(datosGuardados);
// Rellenar formulario...
}
});Limitaciones y Seguridad
Consideraciones importantes para uso seguro:
// Patrón seguro para almacenamiento
const safeStorage = {
set: (key, value) => {
try {
localStorage.setItem(key, JSON.stringify(value));
return true;
} catch (error) {
console.error('Error en localStorage:', error);
return false;
}
},
get: (key) => {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : null;
} catch (error) {
console.error('Error al leer localStorage:', error);
return null;
}
}
};
// Uso
safeStorage.set('config', { theme: 'dark' });
const config = safeStorage.get('config');| Limitación | Solución/Alternativa |
|---|---|
| Solo strings | Serializar con JSON |
| Sincrónico | Usar en pequeñas cantidades |
| Sin cifrado | No almacenar datos sensibles |
| Origen único | Usar IndexedDB para más capacidad |
| XSS Vulnerable | Sanitizar datos, usar HttpOnly cookies |
Eventos y Optimización
Mejores prácticas para almacenamiento eficiente:
// Detectar cambios en storage
window.addEventListener('storage', (event) => {
console.log(`Cambio en ${event.key}:`, {
oldValue: event.oldValue,
newValue: event.newValue,
url: event.url,
storageArea: event.storageArea
});
// Sincronizar entre pestañas
if (event.key === 'preferencias') {
actualizarPreferencias(JSON.parse(event.newValue));
}
});
// Optimizar escrituras
function guardarDatosEficiente(datos) {
// Agrupar actualizaciones
const datosActualizados = { ...datosExistente, ...datos };
// Usar debounce para escrituras frecuentes
clearTimeout(guardarTimeout);
guardarTimeout = setTimeout(() => {
localStorage.setItem('datos', JSON.stringify(datosActualizados));
}, 500);
}
