IndexedDB paso a paso

Antes de empezar, quiero decirte que este post tratará de explicar de la forma más simple qué es y cómo funciona IndexedBD. Por lo que, para mantener un orden habrán links a otros posts donde se explicará de forma más detallada los pasos para la creación de una base de datos en IndexedDB.
Sin mas que decir, espero que te sea de mucha ayuda.

¿Qué es IndexedDB?

De forma breve, IndexedDB es un API para el almacenamiento del lado del cliente. Si bien existe una Web Storage API (sessionStorage y localStorage), este no es muy útil a la hora de almacenar grandes cantidades de datos y sobretodo que mantengan cierta estructura.

Este sistema de base de datos trabaja mediante transacciones (lo veremos más adelante) y es orientada a objetos.
Un punto importante a destacar, es que las transacciones son asíncronas y trabajan bajo el concepto de peticiones (request) que están ligadas a las operaciones que se desea realizar y devuelve un evento una vez que son resueltos.

En resumen, IndexedBD es un sistema de base de datos transaccionales que almacena información estructurada dentro del navegador.

Creación de una BD

Al iniciar con esta base de datos es necesario abrir una conexión, luego especificar el Database Schema que tendrá, esto no es más que la estructura que tendrán los objetos almacenados, y, finalmente, realizar las transacciones que se desee. Una de las ventajas más destacables de IndexedDB es que, al ser independiente de si hay disponibilidad de red o no, la aplicación puede funcionar tanto online como offline.

En el siguiente post, se explica la creación de una base de datos con IndexedBD para persistir los datos en los navegadores de los usuarios:

Crear una base de datos con IndexedDB

Transacciones

Antes de realizar cualquier operación en la base datos (add, delete, get, put) es necesario iniciar una transacción, ya que en esta se especificará qué “tablas” (Object Stores) formarán parte de la transacción, así como el tipo de acceso que se usará para realizar la transacción, para esto se usa el método transaction(storeNames, mode) del objeto IDBDatabase, por lo que se usa la conexión creada anteriormente. Resumen del capítulo anterior:

// Conexion a la BD (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Se crea la conexion
        db = request.result;
    };

    //...
}

// Se crea una transaccion
const transaction = db.transaction('students', 'readonly');
//...

El método transaccion(storeNames, mode) cuenta con los siguientes parámetros:

• storeNames: Son los Object Store que formarán parte de la transacción, el valor es un arreglo con los nombres respectivos, sin embargo, si solo se usará un Object Store se puede colocar como un string.
• mode: Indica el tipo de acceso que se usara para realizar la transacción, estos pueden ser readonly (default), readwrite.

Por ultimo, la transacción devuelve un objeto que contiene el método objectStore(storeName) que es usado para acceder a cada Object Store (tabla) y realizar las operaciones correspondientes.

// Conexion a la BD (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Se crea la conexion
        db = request.result;
    };

    //...
}

// Se crea una transaccion
const transaction = db.transaction('students', 'readonly');

transaction.oncomplete = function(event) {
  // Se ejecuta cuando la transaccion ha finalizado
};

transaction.onerror = function(event) {
  // Manejo de errores
};

// Accedemos a la "tabla students"
const objectStore = transaction.objectStore('students');
//...