localStorage y sessionStorage

Web Storage es una API del navegador que permite guardar datos en el propio navegador del usuario, de forma que sigan ahí aunque recargue la página. Es perfecto para recordar preferencias (tema oscuro, idioma), el contenido de un carrito, un borrador o, como en DevSchool, tu racha de retos.

Por seguridad, el editor “Pruébalo” de DevSchool no deja guardar datos, así que los ejemplos de esta lección tendrás que probarlos en un archivo HTML tuyo (o en la consola del navegador, F12).

Tiene dos almacenes que funcionan igual:

• localStorage: los datos permanecen aunque cierres el navegador. Solo se borran si lo hace tu código o el usuario.
• sessionStorage: los datos se borran al cerrar la pestaña.

Cada almacén es un diccionario de clave → valor, y es distinto para cada origen (protocolo + dominio + puerto): https://devschool.es no puede leer lo que guardó https://otraweb.com.

Guardar, leer y borrar

localStorage.setItem("tema", "oscuro");      // guardar

const tema = localStorage.getItem("tema");   // leer: "oscuro"
localStorage.getItem("no-existe");           // null si la clave no existe

localStorage.removeItem("tema");             // borrar una clave
localStorage.clear();                        // borrar TODO lo de este origen

Con sessionStorage es idéntico: sessionStorage.setItem(...), etc.

Un ejemplo típico: preguntar el nombre solo la primera vez.

let nombre = localStorage.getItem("nombre");
if (!nombre) {
  nombre = prompt("¿Cómo te llamas?");
  localStorage.setItem("nombre", nombre);
}
console.log(`Hola, ${nombre}`);

Solo guarda texto

Las claves y los valores son siempre cadenas de texto. Si guardas otra cosa, se convierte a texto, a menudo de forma inútil:

localStorage.setItem("puntos", 42);
localStorage.getItem("puntos");            // "42" (texto, no número)

localStorage.setItem("usuario", { nombre: "Ana" });
localStorage.getItem("usuario");           // "[object Object]" (se ha perdido todo)

Para guardar números, arrays u objetos, conviértelos a JSON:

const preferencias = { tema: "oscuro", tamLetra: 18, avisos: true };

localStorage.setItem("preferencias", JSON.stringify(preferencias));   // guardar

const guardadas = JSON.parse(localStorage.getItem("preferencias"));  // leer
guardadas.tamLetra;   // 18 (número)

Recomendación: si tu programa necesita guardar varios valores relacionados, agrúpalos en un solo objeto y guárdalo con una sola clave, en lugar de tener muchas claves sueltas.

Hazlo a prueba de fallos

localStorage puede fallar: en modo incógnito de algunos navegadores, si el usuario ha bloqueado el almacenamiento, si se ha llenado, o si el valor guardado no es un JSON válido. Envuelve las lecturas y escrituras en funciones con try...catch:

function leer(clave, porDefecto) {
  try {
    const texto = localStorage.getItem(clave);
    return texto === null ? porDefecto : JSON.parse(texto);
  } catch {
    return porDefecto;
  }
}

function guardar(clave, valor) {
  try {
    localStorage.setItem(clave, JSON.stringify(valor));
  } catch {
    // sin almacenamiento: la aplicación sigue funcionando, solo que no recordará
  }
}

const carrito = leer("carrito", []);
carrito.push({ id: 42, cantidad: 1 });
guardar("carrito", carrito);

Tu página debe funcionar aunque el almacenamiento no esté disponible: simplemente, no recordará nada.

Web Storage frente a cookies

	Web Storage	Cookies
Espacio	Unos 5 MB por origen	Unos 4 KB por cookie
Quién la escribe	Tu JavaScript	Normalmente el servidor
¿Se envía al servidor?	No, se queda en el navegador	Sí, en cada petición
Caducidad	Nunca (local) o al cerrar la pestaña (session)	La que se configure

• Si el dato lo necesita tu código en el navegador (preferencias, un borrador, el estado de un juego), Web Storage es más cómodo y eficiente.
• Si lo necesita el servidor en cada petición (como la sesión de un usuario identificado), se usan cookies.

Lo que no debes guardar

Cualquier script que se ejecute en tu página puede leer localStorage. Si un atacante consigue inyectar código en tu web (un ataque XSS), podrá leerlo todo. Por eso:

• Nunca guardes contraseñas ni datos bancarios.
• Evita guardar datos personales sensibles.
• Ten en cuenta que el usuario puede ver y modificar todo lo que guardas (F12 → Aplicación → Almacenamiento local). No te fíes de esos datos para nada importante, como un precio o unos permisos.

Ver lo que hay guardado

En Chrome: F12 → pestaña Aplicación → Almacenamiento local. En Firefox: F12 → Almacenamiento. Ahí puedes ver, editar y borrar cada clave de la página actual. Muy útil para depurar.

Si necesitas guardar mucha información o hacer búsquedas en ella, existe IndexedDB, una base de datos completa dentro del navegador, más potente pero también más compleja.