Marc Semper Lloret
← El DOM: la web que responde

Sesión 12 · Semana 4

Recordar entre visitas

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se guardan datos en el navegador y qué límites tiene.
  2. 2. Haz: Recuerda las preferencias de tu usuario entre visitas.
  3. 3. Comprueba: Un dato guardado corrupto no rompe la página.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué debería recordar tu web entre visitas? ¿Y qué no?
  2. ¿Dónde crees que se guarda eso?
  3. ¿Qué pasaría si alguien edita a mano lo guardado?

Guardar y recuperar

localStorage.setItem("preferencias", JSON.stringify(preferencias));
const texto = localStorage.getItem("preferencias");   // texto, o null
localStorage.removeItem("preferencias");

Solo guarda texto, así que todo pasa por JSON.stringify y JSON.parse: las dos funciones de la sesión 12 de la UD3.

Almacén Dura Para qué
localStorage Hasta que se borre Preferencias, borradores
sessionStorage Hasta cerrar la pestaña Datos de un proceso en curso
Cookies Según se configuren Sesión de servidor (UD6)

Leer con desconfianza

Lo guardado es entrada externa

Cualquiera puede abrir DevTools y editarlo. Puede estar corrupto, puede ser de una versión anterior de tu web, puede no estar. Si tu código hace JSON.parse a pelo, un valor manipulado deja la página en blanco.

Léelo dentro de un try/catch, valida su forma, y si algo no cuadra, usa los valores por defecto y sigue. Es el mismo principio de la UD3: validar en el borde.

const PREFERENCIAS_POR_DEFECTO = { categoria: "todas", orden: "precio-asc" };

export function leerPreferencias() {
  try {
    const guardado = localStorage.getItem("preferencias");
    if (!guardado) return { ...PREFERENCIAS_POR_DEFECTO };

    const datos = JSON.parse(guardado);
    return {
      categoria: typeof datos.categoria === "string" ? datos.categoria : "todas",
      orden: typeof datos.orden === "string" ? datos.orden : "precio-asc"
    };
  } catch {
    return { ...PREFERENCIAS_POR_DEFECTO };
  }
}

Qué se guarda y qué no

Nunca datos personales ni credenciales

Lo que guardes ahí es legible por cualquiera que se siente delante del equipo y por cualquier código que se ejecute en tu página. Preferencias de interfaz, sí. Contraseñas, tokens, datos de tarjetas o información personal, no.

Y si guardas algo que identifique a una persona, entras en el terreno del consentimiento y la protección de datos, que es harina de otro costal.

También hay límites de tamaño —unos pocos megabytes— y el acceso puede fallar directamente en navegación privada o con el almacenamiento bloqueado. Otra razón para el try/catch.

Tarea 12 · Preferencias que duran

  1. Guarda categoría, orden y vista compacta al cambiarlas.
  2. Recupéralas al arrancar y aplícalas al estado antes del primer render.
  3. Valida lo leído y usa valores por defecto si no cuadra.
  4. Estropea a mano el valor guardado desde DevTools y comprueba que la web aguanta.
  5. Añade un botón de «restablecer preferencias».
  6. Escribe en tus notas qué has decidido no guardar, y por qué.
Objetivo mínimoTres preferencias que sobreviven a recargar, con lectura defensiva.
Si lo tienesGuarda también el término de búsqueda y decide si eso es buena idea.
RetoVersiona lo guardado con una clave de versión y migra el formato antiguo.

Cierre de la semana 4

  • Un único estado gobierna toda la interfaz.
  • Los filtros se combinan y se anuncian.
  • Las preferencias sobreviven a la recarga.
  • Un dato guardado inválido no rompe nada.
Ver respuestas

1 · Solo texto: hay que serializar con JSON.

2 · Porque es editable por cualquiera y puede venir de una versión anterior de la web.

3 · Preferencias de interfaz; nunca credenciales ni datos personales.

Microprueba semanal 4 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Enumera los campos que tendría el estado de tu página.
  2. Un manejador de eventos, ¿qué dos cosas hace exactamente?
  3. ¿Qué debe hacer un precio máximo vacío, y por qué no puede valer cero?
---