Introducción a localStorage

por

En este artículos vamos a realizar una introducción completa a localStorage en JavaScript: una de las formas de guardar información en la web. Este artículo forma parte de la serie Session, Cookie y Storage: tecnologías que permiten a los sitios web recordar preferencias del usuario, el estado de la sesión o datos importantes mientras navegas. En esta introducción, JavaScript nos ofrece la API Web Storage, compuesta por localStorage y sessionStorage.

  • localStorage: persistente, los datos se mantienen aunque el navegador se cierre.
  • sessionStorage: temporal, los datos se eliminan al cerrar la pestaña o ventana del navegador.

¿Qué es localStorage?

localStorage es un objeto disponible en los navegadores modernos que permite almacenar pares clave–valor directamente en el navegador del usuario. A diferencia de las cookies:

  • La información guardada en localStorage no se envía al servidor en cada petición HTTP, lo que lo hace más ligero y eficiente.
  • La información permanece incluso después de cerrar y volver a abrir el navegador (persistente).
  • Tiene un límite aproximado de 5 MB por dominio, mucho mayor que el de las cookies (unos 4 KB).

Introducción a los métodos localStorage

En esta introducción a localStorage veremos que la API es muy sencilla, ya que funciona como un almacén de clave–valor. Las claves y valores siempre se guardan como strings. Estos son algunos ejemplos de uso.

Podemos guardar datos en localStorage con localStorage.setItem();

// Guardar datos
localStorage.setItem("usuario", "Juan");
localStorage.setItem("idioma", "es");

Si queremos recuperar los datos guardados en localStorage usaremos localStorage.getItem();

// Obtener datos
let usuario = localStorage.getItem("usuario");
console.log(usuario); // "Juan"

Para eliminar los datos guardados en localStorage usamos localStorage.removeItem();

// Eliminar un elemento específico
localStorage.removeItem("idioma");

Podemos limpiar todo el contenido de localStorage con localStorage.clear();

// Eliminar todos los elementos
localStorage.clear();

Guardar objetos en localStorage

Como localStorage solo guarda strings, si queremos almacenar objetos o arrays, debemos convertirlos a JSON. Para ello podemos utilizar los siguientes métodos que guardan y devuelven los objetos y arrays como strings.

// Guardar un objeto
let preferencias = { tema: "oscuro", fuente: "grande" };
localStorage.setItem("config", JSON.stringify(preferencias));

// Recuperar el objeto
let config = JSON.parse(localStorage.getItem("config"));
console.log(config.tema); // "oscuro"

Introducción a localStorage

En esta introducción a localStorage en JavaScript, hemos visto que se trata de una herramienta potente y sencilla para guardar información persistente en el navegador. Su facilidad de uso lo convierte en la opción ideal para gestionar configuraciones de usuario, carritos de compra o datos que deben sobrevivir al cierre del navegador. Algunos ejemplos habituales del uso de localStorage son:

  • Carrito de compras: guardar productos seleccionados aunque el usuario cierre el navegador.
  • Preferencias de usuario: idioma, tema (oscuro/claro), tamaño de fuente.
  • Datos temporales en aplicaciones web: guardar progreso de un formulario largo.
  • Evitar llamadas innecesarias al servidor: cachear datos estáticos durante la sesión del usuario.

Sin embargo, aunque localStorage es muy útil, también tiene algunas limitaciones importantes:

  • Síncrono: Las operaciones bloquean el hilo principal de ejecución.
  • Capacidad: Aproximadamente 5 MB, insuficiente para grandes cantidades de datos.
  • Seguridad: Los datos no están encriptados, cualquier persona puede verlos o modificarlos.
  • Sin soporte para datos sensibles: No es recomendable guardar contraseñas ni información crítica.

Después de esta breve introducción a localStorage, siempre debemos recordar que no es un sustituto de una base de datos y que no es seguro para información sensible. Pero usado correctamente, aporta una gran mejora en la experiencia de usuario y en el rendimiento de nuestras aplicaciones web.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario