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](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!
Opiniones