Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
localStorage guarda pares clave-valor directamente en el navegador del usuario, y esos datos siguen ahí incluso después de recargar la página o cerrarla. sessionStorage funciona igual, pero solo dura mientras la pestaña sigue abierta.
Explicación
localStorage guarda datos por clave, como un objeto simple, pero directamente en el navegador del usuario:
localStorage.setItem("clave", valor)Guarda valor bajo el nombre clave. Si esa clave ya existía, la reemplaza.
localStorage.getItem("clave")Devuelve el valor guardado bajo esa clave, o null si no existe.
localStorage.removeItem("clave")Elimina esa clave y su valor guardado.
sessionStorageTiene exactamente los mismos métodos que localStorage, pero sus datos se borran al cerrar la pestaña; localStorage persiste indefinidamente.
Reto rápido
Cambia el valor guardado en localStorage.setItem("tema", "oscuro"); por "claro" y confirma que el mensaje final se actualiza.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
En una página real (fuera de este playground), localStorage.setItem() guarda los datos automáticamente en el navegador: si recargas la página, seguirían ahí sin que tengas que hacer nada más. Aquí lo simulamos con un objeto en memoria por las restricciones de seguridad del playground, pero los métodos que usas son exactamente los reales.
Dato extra
localStorage solo guarda texto (strings): si guardas un número, internamente se convierte a texto, y al leerlo de vuelta obtienes un string, no el número original. Para guardar datos más complejos como objetos, necesitas convertirlos a texto primero (lo verás en la siguiente lección).
Error común
Olvidar que localStorage solo guarda strings: si guardas localStorage.setItem("edad", 25) y luego lo lees, obtienes el string "25" en vez del número 25, y operaciones como sumar directamente pueden no funcionar como esperas.
Siguiente paso
Ya sabes guardar y leer valores simples con localStorage. Ahora veamos cómo convertir objetos completos a texto y de vuelta, para poder guardar datos más complejos.
Ir a la siguiente lección