Tutorial: guarda datos en el navegador con localStorage

Si recargas tu página y todo lo que hiciste desaparece, tu app tiene memoria de pez dorado. localStorage es la solución más simple para que recuerde algo, aunque el usuario cierre el navegador.

Paso 1: guarda un valor

localStorage.setItem('nombre', 'Sofía');

localStorage.setItem(clave, valor) guarda un dato en el navegador del usuario, en su propia computadora, sin necesidad de un servidor. Sobrevive a recargas de página y hasta a reinicios de la computadora.

Paso 2: lee el valor guardado

const nombre = localStorage.getItem('nombre');
console.log(nombre); // 'Sofía'

Si la clave no existe, getItem devuelve null en vez de lanzar un error. Siempre es buena idea revisar eso antes de usar el valor.

Paso 3: guarda objetos (no solo texto)

localStorage solo guarda strings, así que para objetos necesitas convertirlos con JSON:

const usuario = { nombre: 'Sofía', nivel: 'principiante' };

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

const usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));
console.log(usuarioGuardado.nivel); // 'principiante'

JSON.stringify convierte un objeto en texto para poder guardarlo. JSON.parse hace lo contrario: convierte ese texto de vuelta en un objeto usable. Sin esto, JavaScript te va a devolver el string "[object Object]", que no sirve para absolutamente nada.

Paso 4: elimina datos guardados

localStorage.removeItem('usuario'); // borra solo esa clave
localStorage.clear(); // borra TODO lo guardado (con cuidado)

¿Qué acabas de aprender?

• Cómo guardar y leer datos con setItem y getItem.
• Por qué necesitas JSON.stringify / JSON.parse para guardar objetos.
• Cómo borrar datos guardados sin arrepentirte después.