// Guardar
localStorage.setItem('tema', 'oscuro');
localStorage.setItem('usuario', JSON.stringify({ nombre: 'Ana' }));
// Leer
const tema = localStorage.getItem('tema');
const usuario = JSON.parse(localStorage.getItem('usuario'));
// Eliminar
localStorage.removeItem('tema');
localStorage.clear();
✅ Ideal para:
❌ Evitar para:
Ventajas:
Desventajas:
✅ Ideal para:
❌ Evitar para:
| Aspecto | localStorage | sessionStorage |
|---|---|---|
| Persistencia | Permanente | Solo sesión |
| Alcance | Todas las pestañas | Una pestaña |
| Se elimina | Manual | Al cerrar pestaña |
| Compartir datos | Entre pestañas | No |
// Cookie simple
document.cookie = "usuario=Ana";
// Con expiración (1 año)
document.cookie = "tema=oscuro; max-age=31536000";
// Con configuración completa
document.cookie = "sessionId=abc123; Secure; HttpOnly; SameSite=Strict; max-age=3600";
// Leer cookies
const cookie = document.cookie;
✅ Ideal para:
❌ Evitar para:
Ventajas:
Desventajas:
const request = indexedDB.open("MiApp", 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore("usuarios", {
keyPath: "id",
autoIncrement: true
});
store.createIndex("email", "email", { unique: true });
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log("DB abierta");
};
// Crear
const tx = db.transaction("usuarios", "readwrite");
const store = tx.objectStore("usuarios");
store.add({ nombre: "Ana", email: "ana@example.com" });
// Leer
const request = store.get(1);
request.onsuccess = () => console.log(request.result);
// Actualizar
store.put({ id: 1, nombre: "Ana García" });
// Eliminar
store.delete(1);
✅ Ideal para:
❌ Evitar para:
Ventajas:
Desventajas:
¿Datos sensibles (tokens, passwords)?
├─ Sí → Cookies (HttpOnly + Secure + SameSite)
└─ No → ¿Cuánto espacio necesitas?
├─ < 4 KB → ¿El servidor lo necesita?
│ ├─ Sí → Cookies
│ └─ No → localStorage o sessionStorage
├─ 4 KB - 10 MB → localStorage o sessionStorage
└─ > 10 MB → IndexedDB
¿Necesita persistir entre sesiones?
├─ Sí → localStorage, Cookies (con expires), IndexedDB
└─ No → sessionStorage
¿Requiere consultas complejas?
├─ Sí → IndexedDB
└─ No → Otros mecanismos
¿Es data del servidor?
├─ Sí → Cookies (se envía automáticamente)
└─ No → localStorage, sessionStorage, IndexedDB
1. Cross-Site Scripting (XSS)
2. Cross-Site Request Forgery (CSRF)
3. Man-in-the-Middle (MITM)
// ❌ MAL - Cookie insegura
document.cookie = "sessionId=abc123";
// ✅ BIEN - Cookie segura (desde servidor)
Set-Cookie: sessionId=abc123;
HttpOnly; // ❌ No accesible desde JS
Secure; // ✅ Solo HTTPS
SameSite=Strict; // ✅ Protección CSRF
Max-Age=3600; // ✅ Expira en 1 hora
Path=/;
Regla de oro: Los tokens sensibles SIEMPRE van en cookies con HttpOnly desde el servidor, NUNCA en localStorage.
// ✅ BIEN - Manejo completo de errores
function guardarDatos(db, data) {
return new Promise((resolve, reject) => {
const tx = db.transaction('store', 'readwrite');
tx.onerror = () => reject(tx.error);
tx.oncomplete = () => resolve();
const store = tx.objectStore('store');
const request = store.add(data);
request.onerror = () => reject(request.error);
});
}
// ✅ BIEN - Versionado apropiado
const request = indexedDB.open('MiDB', 2);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (event.oldVersion < 2) {
// Migraciones de versión 2
}
};
Para una aplicación moderna:
Autenticación → Cookies (HttpOnly + Secure + SameSite)
Preferencias → localStorage
Estado temporal → sessionStorage
Datos complejos → IndexedDB
MDN Web Docs:
Web.dev:
Herramientas: