Persistencia en navegador: localStorage y sessionStorage

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.
  • Sí: tema visual, filtros, borradores, último tab activo.
  • No: tokens sensibles, datos críticos de negocio.
  • Sí: valores pequeños y simples.
  • No: blobs grandes o estructuras gigantes.

Cuándo sí y cuándo no usar storage

Persistencia útil, no cajón de sastre.

  • Sí: tema visual, filtros, borradores, último tab activo.
  • No: tokens sensibles, datos críticos de negocio.
  • Sí: valores pequeños y simples.
  • No: blobs grandes o estructuras gigantes.

Guardar y leer objetos correctamente

Storage guarda strings: tú controlas serialización.

  • Siempre maneja `null` cuando no existe clave.
  • Usa `try/catch` si la fuente puede estar corrupta.
  • Define valores por defecto claros.

Sincronizar storage con 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.

JavaScript
32

Persistencia en navegador: localStorage y sessionStorage

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

📘 Teoría

Cuándo sí y cuándo no usar storage

Persistencia útil, no cajón de sastre.

  • Sí: tema visual, filtros, borradores, último tab activo.
  • No: tokens sensibles, datos críticos de negocio.
  • Sí: valores pequeños y simples.
  • No: blobs grandes o estructuras gigantes.

Guardar y leer objetos correctamente

Storage guarda strings: tú controlas serialización.

  • Siempre maneja `null` cuando no existe clave.
  • Usa `try/catch` si la fuente puede estar corrupta.
  • Define valores por defecto claros.

Sincronizar storage con UI

Carga al iniciar y guarda tras cada cambio relevante.

1

El patrón típico es `hydrate` al cargar página y `persist` al cambiar estado.

2

Si cambias estado pero no guardas, tendrás inconsistencias al recargar.

🧪 Aprende probando

Ejemplo Ejemplo guiado: guardar preferencias Persistir objeto de configuración con JSON.

🏁 Retos

Reto Reto: sesión temporal con sessionStorage Guarda un valor que se mantenga mientras la pestaña siga abierta.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com