IndexedDB paso a paso
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-01-04 01:11:38

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](https://dev.to/pandresdev/crear-una-base-de-datos-con-indexedbd-4faa)

## 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](https://dev.to/pandresdev/crear-una-base-de-datos-con-indexedbd-4faa). Resumen del [capítulo anterior](https://dev.to/pandresdev/crear-una-base-de-datos-con-indexedbd-4faa):

```jsx
// 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.

```jsx
// 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');
//...
```