Binary Coffee

¬ŅCu√°l es la diferencia entre LocalStorage, SessionStorage e IndexedDB?

chrome firefox javascript

Inicialmente los navegadores web solamente mostraban aquella informaci√≥n que el servidor prove√≠a y practicamente m√°s all√° del renderizado de la p√°gina no hac√≠an mucho m√°s. Desde hace muchos a√Īos esto ha evolucionado grandemente y a dado paso a los navegadores que conocemos en la actualidad.

Los navegadores actuales est√°n en un punto, en el cual se pueden tener aplicaciones completamente independientes sin necesidad de una API, solo con cargar nuestro frontend y tener todos los datos de manera est√°tica. Incluso podemos tener sitios web que sin estar conectados a internet funcionen. ¬ŅPero c√≥mo ocurre esto?

Pues la respuesta a esto es sencilla: los navegadores guardan los datos de las páginas en que navegamos, y la manera en que guardan dicha información, es por medio de los protagonistas de este artículo LocalStorage / SessionStorage / IndexedDB.

A lo largo del artículo iremos viendo cada uno de los métodos de almacenar información en una aplicación web, y cuales y por qué, utilizar en cada momento.

Session Storage (Almacenamiento de sesión)

El sessionStorage es posiblemente (desde mi experiencia) el menos utilizado de los m√©todos para almacenar informaci√≥n en una aplicaci√≥n web. Este m√©todo b√°sicamente te permite de manera din√°mica almacenar informaci√≥n de la forma llave-valor pero solo en la pesta√Īa en la que el usuario se encuentra actualmente, lo que implica que si esta pesta√Īa es cerrada, los datos se pierden.

Ventajas

  • El acceso a la informaci√≥n es r√°pido, dado que los datos se almacenan de la manera llave-valor

Desventajas

  • Los valores se pierden una vez que se cierra la ventana
  • Los valores que almacena no pueden ser compartidos entre m√°s de una ventana

A continuaci√≥n un peque√Īo ejemplo de c√≥mo utilizar el sessionStorage:

// set a value
sessionStorage.setItem('input', sessionValue.value);

// get a value
sessionStorage.getItem('input');

// remove a single item
sessionStorage.removeItem('input');

// clear the whole sessionStorage
sessionStorage.clear();

Local Storage (Almacenamiento local)

El localStorage es muy similar al sessionStorage, con la √ļnica diferencia que este puede ser compartido entre varias ventanas del navegador y perdura en el tiempo.

Ventajas

  • El acceso a la informaci√≥n es r√°pido, dado los datos se almacenan de la forma llave-valor
  • Los valores que almacena se comparten entre todas las ventanas del mismo sitio
  • Los valores almacenados perduran incluso despu√©s de cerrar las ventanas

Desventajas

  • El mismo car√°cter llave-valor que tiene, hace que para un c√ļmulo grande de datos no sea eficiente la utilizaci√≥n del mismo

Las operaciones del localStorage son similares a las antes vistas:

// set a value
localStorage.setItem('input', sessionValue.value);

// get a value
localStorage.getItem('input');

// remove a single item
localStorage.removeItem('input');

// clear the whole localStorage
localStorage.clear();

IndexedDB (Base de dato indexada)

El caso del indexedDB es completamente diferente a los m√©todos anteriores, dado que c√≥mo su nombre lo indica, es una base de datos. Dicha base de datos es almacenada de manera local en el navegador y permite hacer consultas y dem√°s operaciones disponibles en una base de datos com√ļn.

Las diferencias m√°s considerables y el por qu√© de utilizar IndexedDB sobre localStorage, est√° dado por las opciones de b√ļsqueda y filtrado que proporciona esta funcionalidad similares a una base de datos, que para el manejo de un c√ļmulo grande de datos mejoran grandemente el rendimiento de la aplicaci√≥n. Puesto que el localstorage solo almacena valores de la manera llave-valor, y si se quisiera almacenar un listado, habr√≠a que serializarlo dentro del navegador y para cada consulta obtener todos estos datos en memoria y hacer las operaciones pertinentes, mientras que con indexedDB, todas estas operaciones ser√≠an manejadas por el navegador y solo se obtendr√≠a el resultado de las consultas.

Ventajas

  • Permite trabajar con gran c√ļmulo de datos de una manera f√°cil y eficiente.

Desventajas

  • Es m√°s complejo de utilizar y configurar a diferencia del localStorage y el sessionStorage
  • Todas las operaciones son as√≠ncronas, aunque es posible trabajar de forma organizada haciendo uso de Promises

Ejemplo de indexedDB

// open the indexedDB connection
const request = window.indexedDB.open("MyTestDatabase", 1);

// instance of the current DB
let db;

// The first time that the current version of the DB is
// created the next method is called and this is used
// usually for create the tables the first time or update
// the tables if is a new version and it is necessary
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore("data", {keyPath: "key"});
  objectStore.createIndex("value", "value");
};

// The basic operations en the DB, should be executed after the
// next event is called
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) || '';
  };
};

Como se puede ver en el ejemplo anterior, el solo configurar la base de datos más simple que se pueda tener, lleva toda esta serie de acciones, y todavía no se han realizado acciones sobre la DB. A continuación un ejemplo sencillo basado en el código anterior de cómo obtener, guardar y eliminar información.

function saveIndexDBStorage() {
  const transaction = db.transaction(['data'], 'readwrite');
  // get the instance of the table
  const objectStore = transaction.objectStore('data');
  // check if the value exist in the table
  const request = objectStore.get('input');
  request.onsuccess = () => {
    if (request.result) {
      // if the value exist, update it
      const data = request.result;
      data.value = indexDBValue.value;
      objectStore.put(data);
    } else {
      // if the value doesn't exist, create it
      objectStore.add({key: 'input', value: indexDBValue.value});
    }
  };
}

function clearIndexDBStorage() {
  const transaction = db.transaction(['data'], 'readwrite');
  // get the instance of the table
  const objectStore = transaction.objectStore('data');
  // remove the value in the table
  objectStore.delete('input');
}

Un ejemplo del uso de indexedDB puede ser visto en devdocs.io/offline. En este sitio se pueden encontrar una gran cantidad de documentaci√≥n de tecnolog√≠as y el mismo cuenta con la funcionalidad de descargarse offline la informaci√≥n. B√°sicamente lo que se hace, es descargar toda la documentaci√≥n para una DB local y luego, sin tener internet se puede consumir toda esta informaci√≥n a la cual se pueden hacer b√ļsquedas, filtrados y las mismas operaciones que cuando se estaba online. Este tipo de ventajas son las que se ganan al usar indexedDB, pero no siempre es la mejor opci√≥n y usualmente es m√°s que suficiente lo que brinda el localstorage.

Enlaces

Conclusiones

Espero el artículo te haya sido de agrado y no duden dejar en los comentarios sus opiniones.

Si deseas ver los códigos de ejemplo utilizados en el artículo, puedes obtenerlos en este proyecto que de manera muy simple, tiene un ejemplo de cada una de las tres maneras de almacenar información en el navegador.

Happy coding!

Opiniones