IndexedDB, un sistema de BBDD que también funciona sin conexión


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Tener bases de datos detrás de las aplicaciones, pero cuando estás desarrollando una aplicación web es posible que las consultas se tengan que resolver en algún momento sin conexión a Internet. Te presentamos en este post IndexedDB, que facilita el almacenamiento y gestión de grandes cantidades de datos estructurados y añade esta interesante característica. Vamos a explicarte qué es más en detalle, así como las maneras de utilizarla en tu aplicación web.

IndexedDB no es más que un sistema de base de datos transaccionales que sirve para guardar la información estructurada en el propio navegador. Es ideal para almacenar abundantes cantidades de datos, como por ejemplo catálogos de productos, que requieren también de una búsqueda rápida de la información que hay en ellos. Además, IndexedDB, para ser usado con Progressive Web Apps, cuenta con la característica de ser asíncrono, por lo que no dificulta el acceso a la información mediante JavaScript.

En una aplicación progresiva, guardaríamos en la Cache Storage esa información, pero podría resultar complicado en circunstancias como un CRUD (Create, Read, Update, Remove). En este caso, echaríamos mano de IndexedDB.

Cómo usar IndexedDB

En el diagrama que te mostramos a continuación, explicaremos el proceso de utilización de IndexedDB en tu app.

  • Cómo abrir una base de datos. Con el código de ejemplo que mostramos a continuación, podremos abrir la base de datos:
    // Abrimos la DB
     var request = window.indexedDB.open("myDB", 1);
    
    request.onerror = function(event) {
       // Manejamos el error al abrir.
       console.error(“error:”,event.target.errorCode);
     };
    
    request.onsuccess = function(event) {
       // Hacemos el proceso exitoso al abrir.
       db = event.target.result;
     };
  • Cómo arrancar la operación de lectura/escrituraCuando tengamos abierta nuestra base de datos IndexedDB, lo siguiente que vamos a hacer es leer o escribir en el Object Store. Esta acción se efectúa de la siguiente manera y el código sería algo similar a esto:
     // Escribiendo Datos en el Object Store
     request.onsuccess = function(event) {
     db = event.target.result;
    
    var dummyData = [ 
     {
                     “personal_id”: “1”,
                     “first_name”: “Carlos”
     },
     {
     “personal_id”:  “2”,
                     “first_name”: “Jhon”
     }
     ];
    
    // puede ser readonly o readwrite
     var transaction = db.transaction(["customers"], "readwrite");
     
     // Agregando los datos en el objectStore
     var objectStore = transaction.objectStore(“myUsers”) ;
     dummyData.forEach(
     function(customer){
                     var request = objectStore.add(customer);
     });
     
     };
     // Leyendo Datos en el Object Store
     request.onsuccess = function(event) {
     db = event.target.result;
     
     var dummyData = [ 
     {
                     “personal_id”: “1”,
                     “first_name”: “Carlos”
     },
     {
     “personal_id”:  “2”,
                     “first_name”: “Jhon”
     }
     ];
    
    // puede ser readonly o readwrite
     var transaction = db.transaction(["customers"], "readonly");
     // Agregando los datos en el objectStore
     var objectStore = db.transaction(“myUsers”) ;
     var request = objectStore.get("1");
     
     request.onerror = function(event) {
       // Manejo de errores
     };
     request.onsuccess = function(event) {
      // Hacer algo cuando se obtenga el registro.
      );
     };
  • Borrar datos en el Object StorePor último, si lo que queremos es borrar datos del Object Store, el código para realizar la operación sería de la siguiente manera:
    // Borrando un registro
     var request = db.transaction(["customers"], "readwrite")
                     .objectStore("myUsers")
                     .delete("1");
     request.onsuccess = function(event) {
       // se borro exitosamente.
     };

Uso fácil de IndexedDB en tu app

Habrás podido comprobar lo sencillo que es utilizar IndexedDB. Aún así, puede convertirse en un tema complicado, debido a su diseño y a sus implementaciones. Por suerte, tenemos a nuestra disposición algunas librerías y wrapper (envolturas) que nos ayudarán a manejar las transacciones de manera más cómoda.

Las librerías más conocidas para ayudarnos y simplificarnos la tarea con IndexedDB son las siguientes:

  • LocalForage. Es parecido al localStorage y muy sencillo de utilizar.
  • Dexie.js. Perfectamente documentada, fácil de utilizar y una de las preferidas por los desarrolladores.

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+