Guarda estado útil en cliente con criterio: qué persistir, cómo serializar y cómo evitar inconsistencias.
Storage permite mantener preferencias y estado entre recargas sin backend.
localStorage persiste entre sesiones; sessionStorage vive solo en pestaña actual.
Solo guarda datos no sensibles y con tamaño razonable.
Serializa con JSON de forma explícita para evitar errores de tipo.
Persistencia útil, no cajón de sastre.
Storage guarda strings: tú controlas serialización.
Carga al iniciar y guarda tras cada cambio relevante.
El patrón típico es `hydrate` al cargar página y `persist` al cambiar estado.
Si cambias estado pero no guardas, tendrás inconsistencias al recargar.
Guarda estado útil en cliente con criterio: qué persistir, cómo serializar y cómo evitar inconsistencias.
Código del tema: localStorage.setItem/getItem | JSON.stringify/parse
Persistencia útil, no cajón de sastre.
Storage guarda strings: tú controlas serialización.
const estadoUI = { tema: 'oscuro', sidebar: true };
localStorage.setItem('ui', JSON.stringify(estadoUI));
const raw = localStorage.getItem('ui');
const ui = raw ? JSON.parse(raw) : { tema: 'claro', sidebar: false };
console.log(ui);Carga al iniciar y guarda tras cada cambio relevante.
El patrón típico es `hydrate` al cargar página y `persist` al cambiar estado.
Si cambias estado pero no guardas, tendrás inconsistencias al recargar.
const btn = document.querySelector('#toggle-theme');
const saved = localStorage.getItem('theme') || 'light';
document.body.dataset.theme = saved;
btn.addEventListener('click', () => {
const next = document.body.dataset.theme === 'light' ? 'dark' : 'light';
document.body.dataset.theme = next;
localStorage.setItem('theme', next);
});