Almacenamientos del navegador: Local Storage, Session Storage, IndexedDB y Cookie

Cuando trabajamos con datos en un navegador, seguramente nos surja la necesidad de tener que almacenar alguno de esos datos para que persistan y estén disponibles durante la navegación entre las diferentes páginas de nuestra web. El tiempo que necesitamos que se encuentren disponibles o la forma de recogerlos es lo que marcará el tipo de almacenamiento del navegador que debemos utilizar. Existen varios tipos: Local Storage, Session Storage, IndexedDB y Cookies.

A continuación, veremos sus características principales y cómo trabajar con ellos de la forma más adecuada.

Local Storage

Es un tipo de almacenamiento muy utilizado y el acceso a la información es bastante rápido. Las características más importantes de este espacio de almacenamiento son:

Está basado en el formato clave-valor.
No tiene fecha de expiración, a menos que se limpie el navegador de forma explícita usando los ajustes del propio navegador o por código en JavaScript.
Puede almacenar hasta 10MB de datos, dependiendo del navegador.
Sólo los scripts del mismo origen pueden acceder a los datos.
Se puede compartir entre diferentes pestañas.
No se envían los datos al servidor, es de uso exclusivo del cliente.
Los datos que se almacenan son de tipo texto.

La forma más adecuada de trabajar con el Local Storage sería:

Para almacenar un elemento:
- localStorage.setItem(“key”, “value”)
Para obtener un elemento:
- localStorage.getItem(“key”)
Para eliminar un elemento:
- localStorage.removeItem(“key”)
Para limpiar toda la información:
- localStorage.clear()

Session Storage

Es un tipo de almacenamiento en el navegador muy parecido al Local Storage. Comparten muchas de sus características principales pero la mayor diferencia es que el Session Storage no se puede compartir entre diferentes pestañas. La otra diferencia mayor es que la información perdura mientras este la pestaña abierta, lo que dura la sesión del usuario. Las características más importantes son:

Está también basado en el formato clave-valor.
La información persiste hasta que la pestaña o ventana es cerrada, incluso con una recarga de la página.
Almacena entre 5 y 10MB de datos, dependiendo del navegador que se utilice.
Sólo los scripts del mismo origen pueden acceder a los datos.
Está limitado al uso dentro de la misma pestaña, no se puede compartir información entre ventanas o pestañas.
Es de uso exclusivo del lado cliente.
El formato de la información que se almacena es de tipo texto.

La forma más adecuada de trabajar con el Session Storage sería:

Para almacenar un elemento:
- sessionStorage.setItem(“key”, “value”)
Para obtener un elemento:
- sessionStorage.getItem(“key”)
Para eliminar un elemento:
- sessionStorage.removeItem(“key”)
Para limpiar toda la información:
- sessionStorage.clear()

IndexedDB

Tipo de almacenamiento que ofrece la posibilidad de guardar datos estructurados, incluyendo archivos y blobs. Una de las propiedades más importantes de este almacenamiento es que es asíncrono, no como el Local Storage o el Session Storage. Los métodos del API asíncrono retornan sin bloquear el hilo de llamada. Las características principales del IndexedDB son:

Puede almacenar objetos, pares de clave-valor o incluso blobs.
La capacidad de almacenamiento viene determinada por el navegador, pero es mucho mayor que otros tipos de almacenamiento.
Los métodos de acceso y modificación son asíncronos, lo que hace que no bloquee el hilo principal.
Sigue la misma política de que sólo funciona cuando el origen es el mismo.
No tiene fecha de expiración, para eliminar los datos hay que hacerlo de forma explícita.
El acceso a datos grandes es rápido ya que funciona igual que una base de datos con sus consultas.
No es necesario extraer toda la información para obtener una pequeña parte, gracias a sus consultas se puede obtener directamente la parte que se requiere.

La forma más adecuada de trabajar con IndexedDB es:

Para abrir la conexión con la base de datos:
- const request = window.indexedDB.open("MyTestDatabase", 1);
Para crear una tabla:
- request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore("data", {keyPath: "key"});
  objectStore.createIndex("value", "value");
  };
- request.onsuccess = (event) => {
  db = event.target.result;
  const dataTransaction = db.transaction(['data'], 'readwrite');
  dataTransaction.objectStore('data').get('input').onsuccess = (event) => {
  indexDBValue.value = (event.target.result && event.target.result.value) || '';
  };
  };
Para almacenar algún dato:
- const transaction = db.transaction(['data'], 'readwrite');
  const objectStore = transaction.objectStore('data');
  const request = objectStore.get('input');
  request.onsuccess = () => {
  objectStore.add({key: 'input', value: indexDBValue.value});
  };
Para extraer un dato:
- const transaction = db.transaction(['data'], 'readwrite');
  const objectStore = transaction.objectStore('data');
  const request = objectStore.get('input');
  request.onsuccess = () => {
  // Manejar el dato que se encuentra en request.result
  };
Para eliminar una tabla:
- const transaction = db.transaction(['data'], 'readwrite');
  const objectStore = transaction.objectStore('data');
  objectStore.delete('input');

Cookies

Tipo de almacenamiento en la que se guardan pequeñas informaciones. Muchas de ellas son usadas para personalizar la experiencia que tiene el usuario, o para guardar las preferencias o entradas de información al visitar una página web. Se pueden almacenar desde el servidor utilizando un encabezado en la petición "http" o desde código en JavaScript. Las características de este tipo de almacenamiento son:

Usado para almacenar pequeñas informaciones.
Se almacenan en el lado cliente, pero se pueden generar desde el servidor o el propio cliente.
Se comparten entre diferentes pestañas y sesiones.
Su persistencia viene configurada en su creación, se puede configurar con fecha de expiración o sin ella.
Sigue la política de que es accesible desde el mismo dominio. Para diferentes subdominios del mismo dominio habría que realizar una configuración.
Puede almacenar hasta 4KB de datos.
Tiene soporte con navegadores antiguos y modernos.

La forma más adecuada de trabajar con las cookies sería:

Para almacenar un elemento:
- document.cookie=”key=item”;
Para almacenar un elemento con fecha de expiración:
- document.cookie=”key=item; expires=Thu, 15 Dec 2022 12:00:00 UTC";
Para obtener los elementos:
- document.cookie;
Para eliminar un elemento:
- document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";