localStorage: guardar datos en el navegador con JavaScript

localStorage guarda pares clave-valor de texto en el navegador de la persona usuaria y los conserva aunque cierre la pestaña o reinicie el equipo. Es útil para recordar preferencias, borradores o el progreso de una aplicación pequeña, sin necesidad de servidor.

Operaciones básicas

localStorage.setItem('tema', 'oscuro');           // guardar
console.log(localStorage.getItem('tema'));        // 'oscuro'
console.log(localStorage.getItem('otra'));        // null (no existe)
localStorage.removeItem('tema');                  // borrar una clave
localStorage.clear();                             // borrar todo lo del sitio

Solo guarda texto. Si guardas un número, lo recuperas como texto:

localStorage.setItem('puntos', 10);
console.log(typeof localStorage.getItem('puntos')); // 'string'
console.log(Number(localStorage.getItem('puntos')) + 1); // 11

Guardar objetos y arrays con JSON

const tareas = [
  { id: 1, texto: 'Leer', hecha: false },
  { id: 2, texto: 'Practicar', hecha: true }
];

localStorage.setItem('tareas', JSON.stringify(tareas));

const guardadas = JSON.parse(localStorage.getItem('tareas')) ?? [];
console.log(guardadas.length); // 2

JSON.stringify convierte la estructura en texto y JSON.parse la reconstruye. El operador ?? [] ofrece un valor inicial cuando todavía no hay nada guardado.

Leer con seguridad

El contenido puede estar vacío, corrupto o haberlo modificado la propia persona usuaria. Protege la lectura:

function leerTareas() {
  try {
    const datos = JSON.parse(localStorage.getItem('tareas'));
    return Array.isArray(datos) ? datos : [];
  } catch {
    return [];
  }
}

Además, el acceso puede lanzar un error cuando el navegador bloquea el almacenamiento (modo privado estricto, cookies desactivadas). Envuelve las escrituras en try/catch y haz que la aplicación funcione igualmente sin guardar.

localStorage frente a sessionStorage

Límites y precauciones

• No guardes datos sensibles: contraseñas, tokens de acceso o datos personales. Cualquier script de la misma página puede leerlos.
• Es síncrono: guardar cantidades grandes puede bloquear la interfaz. Para volúmenes mayores existe IndexedDB.
• Es local: los datos no viajan entre dispositivos ni navegadores.
• Información al usuario: si guardas datos de la persona usuaria, infórmala y ofrece una forma de borrarlos. Este sitio usa localStorage solo para el progreso y los borradores, y permite eliminarlos desde Gestionar mis datos.

Ejemplo completo: recordar un nombre

const campo = document.querySelector('#nombre');
campo.value = localStorage.getItem('nombre') ?? '';

campo.addEventListener('input', () => {
  localStorage.setItem('nombre', campo.value);
});

Con tres líneas, el campo recuerda su contenido en la siguiente visita.

Última actualización: 18 de octubre de 2026. Los ejemplos se han comprobado en un navegador actual y en Node.js.