FerGv blog

# localStorage (Almacenamiento en el navegador)

Hoy en día, el desarrollo web se ha vuelto tan complicado que lo que antes solo se hacía del lado del backend (opens new window)(donde se procesa la lógica, lo que no ve el usuario), ahora se reparte en el frontend (opens new window)(lado visual que interactúa con el usuario) y en algunos casos hasta se delega completamente a este lado.

Cry

Un ejemplo de esto es la autenticación, que antes se manejaba en el servidor a través de sesiones las cuales utilizaban cookies (opens new window) para almacenar pequeña información en el navegador acerca del usuario. Esto funcionaba bien cuando todo era una arquitectura monolítica (opens new window) y la lógica y la presentación eran manejados en conjunto. Pero cuando comenzamos a separarlos, tuvimos que buscar nuevas maneras de almacenar más información del lado del cliente (opens new window).

Fue así que se creó una API (opens new window) del navegador llamada localStorage (opens new window) para almacenar todo lo que una aplicación frontend necesitara. Pero debo aclarar que tiene sus consideraciones:

  • Solo se puede almacenar texto.
  • Está limitada a guardar máximo 5MB por dominio.
  • Todo se almacena como parejas clave-valor.
  • Cualquier script JS tiene acceso al almacenamiento.

Pero esto no es necesariamente malo. De hecho, para la mayoría de casos es más que suficiente. Así que veamos cómo usar esta API, te sorprenderá lo sencilla que es:

# Crear/Editar items

Para acceder a la API, usamos el objeto global localStorage y los métodos que nos provee. El primero de ellos es setItem() que nos ayuda a crear un nuevo item si no existe, o editarlo en caso de que ya se encuentre guardado en el almacén.

Este método recibe como primer parámetro la llave para identificar al item, y como segundo parámetro el valor a guardar.

// Crear items
localStorage.setItem('nombre', 'Fer');
localStorage.setItem('edad', 23);

// Actualizar items
// Simplemente utiliza la misma llave.
localStorage.setItem('nombre', 'Pedro');

Ya que solo podemos guardar texto, si intentas almacenar un tipo de dato complejo como un arreglo o un objeto, debes primero convertirlo a texto usando JSON.stringify() (opens new window) y pasando el valor como argumento.

const persona = { nombre: 'Fer', edad: 23 };
localStorage.setItem('persona', JSON.stringify(persona));

TIP

Puedes revisar todo lo que está almacenado en tu navegador, entrando a las herramientas de desarrollador.

Revisa la documentación de tu navegador para saber cómo acceder a esta información.

# Obtener items

Para obtener algo de nuestro almacén usamos el método getItem() junto con la llave. Esto nos regresará el texto guardado o null en caso de no encontrar esa llave.

localStorage.getItem('nombre');
// -> 'Fer'

localStorage.getItem('edad'); // Retorna texto, no número
// -> '23'

localStorage.getItem('no-existe');
// -> null

Recuerda que todo en el localStorage es texto, por lo que los objetos más complejos deben ser convertidos antes de usarse. JSON.parse() (opens new window) transforma las cadenas de texto a su tipo de dato original.

localStorage.getItem('persona'); // Retorna texto, no el objeto
// -> '{ nombre: "Fer", edad: 23 }'

JSON.parse(localStorage.getItem('persona'));
// -> { nombre: 'Fer', edad: 23 }

# Borrar items

Para borrar un item llamamos al método removeItem() y pasamos la llave.

localStorage.removeItem('nombre');

Y para borrar todos los items usamos clear().

localStorage.clear();

# Conclusión

localStorage es solo un tipo de almacenamiento en el navegador (opens new window) pero abre las posibilidades a grandes cosas, ya que ofrece flexibilidad a las aplicaciones cliente para guardar todo tipo de información que necesiten como tokens de autenticación (opens new window) (aunque debes tener cuidado), datos del usuario, preferencias como el tema oscuro, etc.

La API es realmente sencilla, así que te recomiendo que empieces a usarla en tus aplicaciones, podría ser de mucha utilidad.

Happy coding! 🥸

← Programación Orientada a Objetos (POO) →