¿Cuál es la diferencia entre LocalStorage, SessionStorage e IndexedDB?

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](https://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 - [developer.mozilla.org/es/docs/Web/API/IndexedDB_API](https://developer.mozilla.org/es/docs/Web/API/IndexedDB_API/Usando_IndexedDB) - [devdocs.io](https://devdocs.io) - [Code example in github](https://github.com/wil92/storage-examples) ## 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](https://github.com/wil92/storage-examples) que de manera muy simple, tiene un ejemplo de cada una de las tres maneras de almacenar información en el navegador. > Happy coding!