Base de datos IndexedDB de HTML5 Web

IndexedDB es una base de datos NoSQL basada en el navegador, utilizada para almacenar de forma persistente grandes cantidades de datos estructurados en el cliente.

IndexedDB permite almacenar objetos de datos complejos (como objetos, arrays, archivos, etc.) mediante pares clave-valor, y admite transacciones, índices, control de versiones y operaciones de consulta complejas.

IndexedDB es asíncrono, no bloquea el hilo principal, y es adecuado para aplicaciones offline, cachés y otros escenarios.

IndexedDB es muy adecuado para aplicaciones que necesitan almacenar grandes cantidades de datos estructurados, especialmente aplicaciones web que desean admitir modo offline o manejar consultas complejas.

Características de IndexedDB

  • Almacenamiento de pares clave-valor: Los datos se almacenan en forma de pares clave-valor en un almacén de objetos (object store).
  • Soporte de transacciones: Todas las operaciones de datos deben completarse dentro de una transacción para garantizar la consistencia e integridad de los datos.
  • API asíncrona: Todas las operaciones son asíncronas, no bloquean el hilo de la interfaz de usuario, y utilizan devoluciones de llamada (callbacks) o Promesas para manejar los resultados.
  • Control de versiones: La base de datos utiliza números de versión para gestionar el esquema de la base de datos (como crear o modificar almacenes de objetos).
  • Índices: Admite la creación de índices sobre campos de datos para acelerar las consultas.
  • Soporte offline: Los datos pueden almacenarse de forma persistente y seguir accediendo a ellos sin conexión, lo que es muy adecuado para construir aplicaciones web offline.

Sintaxis de IndexedDB

La sintaxis de IndexedDB se explica a continuación:

// Abrir o crear una base de datos
var request = indexedDB.open('databaseName', version);

// Manejar la actualización de la base de datos
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Crear un almacén de objetos (tabla) y establecer la clave primaria
  var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });

  // Crear un índice
  objectStore.createIndex('fieldName', 'fieldName', { unique: false });
};

// Devolución de llamada al abrir correctamente la base de datos
request.onsuccess = function(event) {
  var db = event.target.result;

  // Realizar operaciones de transacción
  var transaction = db.transaction('storeName', 'readwrite');
  var objectStore = transaction.objectStore('storeName');

  // Insertar datos
  objectStore.add({ id: 1, name: 'John Doe', age: 30 });

  // Consultar datos
  var query = objectStore.get(1);
  query.onsuccess = function(event) {
    console.log(event.target.result);
  };
};

// Manejo de errores
request.onerror = function(event) {
  console.error('Database error:', event.target.error);
};

Métodos de IndexedDB

1、indexedDB.open()：Se utiliza para abrir una base de datos existente o crear una nueva.

var request = indexedDB.open('databaseName', version);

2、db.createObjectStore()：Crea un almacén de objetos (similar a una tabla) en el evento onupgradeneeded.

var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });

3、objectStore.add()：Añade datos al almacén de objetos dentro de una transacción.

objectStore.add({ id: 1, name: 'John Doe' });

3、objectStore.get()：Obtiene datos del almacén de objetos según la clave.

var request = objectStore.get(1);

4、objectStore.put()：Actualiza un registro existente, y si no existe, lo inserta.

objectStore.put({ id: 1, name: 'John Updated' });

5、objectStore.delete()：Elimina un registro según la clave.

objectStore.delete(1);

6、db.transaction()：Crea una transacción, especificando el nombre del almacén de objetos y el modo de transacción (readonly o readwrite).

var transaction = db.transaction(['storeName'], 'readwrite');

7、objectStore.createIndex()：Crea un índice para los campos del almacén de objetos, con el fin de realizar consultas más rápidas.

objectStore.createIndex('nameIndex', 'name', { unique: false });

Ejemplos de aplicación de IndexedDB

A continuación se muestra un ejemplo completo de IndexedDB, utilizado para crear una base de datos, insertar datos, consultar datos y actualizar datos.

Ejemplo

// Abrir o crear una base de datos
var request = indexedDB.open('myDatabase', 1);

// Se activa si la versión de la base de datos cambia o al crearla por primera vez
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Crear un almacén de objetos (tabla), establecer la clave primaria como 'id'
  var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

  // Crear un índice para el campo 'name'
  objectStore.createIndex('name', 'name', { unique: false });
};

// Base de datos abierta correctamente
request.onsuccess = function(event) {
  var db = event.target.result;

  // Insertar datos
  var transaction = db.transaction(['customers'], 'readwrite');
  var objectStore = transaction.objectStore('customers');
  objectStore.add({ id: 1, name: 'John Doe', email: '[email protected]' });
  objectStore.add({ id: 2, name: 'Jane Doe', email: '[email protected]' });

  transaction.oncomplete = function() {
    console.log('Transaction completed: data added.');
  };

  transaction.onerror = function(event) {
    console.error('Transaction failed:', event);
  };

  // Consultar datos
  var queryTransaction = db.transaction(['customers']);
  var queryObjectStore = queryTransaction.objectStore('customers');
  var query = queryObjectStore.get(1);

  query.onsuccess = function(event) {
    console.log('Customer:', event.target.result);
  };

  // Actualizar datos
  var updateTransaction = db.transaction(['customers'], 'readwrite');
  var updateObjectStore = updateTransaction.objectStore('customers');
  var updatedCustomer = { id: 1, name: 'John Smith', email: '[email protected]' };

  updateObjectStore.put(updatedCustomer);

  updateTransaction.oncomplete = function() {
    console.log('Transaction completed: data updated.');
  };
};

// Manejo de errores
request.onerror = function(event) {
  console.error('Database error:', event.target.error);
};

Casos de uso de IndexedDB

  • Almacenamiento offline: IndexedDB te permite almacenar datos para acceder a ellos cuando no hay conexión de red, lo cual es crucial para aplicaciones web offline.

  • Caché: se puede utilizar para almacenar grandes cantidades de datos en caché (como archivos, imágenes, vídeos), mejorando la velocidad de carga de la aplicación.

  • Procesamiento de datos complejos: es adecuado para escenarios que requieren almacenar y procesar grandes cantidades de datos estructurados, especialmente cuando se necesitan funciones de indexación y consulta.

  • Base de datos local: IndexedDB puede actuar como base de datos local de aplicaciones frontend, almacenando datos de usuario, información de configuración, estado de la aplicación, etc.

Ventajas de IndexedDB

  • Almacenamiento de gran capacidad: admite un almacenamiento de datos mucho mayor (a menudo puede alcanzar cientos de MB o más), mucho más grande que el límite de 5MB de localStorage.

  • Operaciones de datos enriquecidas: admite operaciones complejas como transacciones, índices, consultas, procesamiento por lotes, etc.

  • Soporte offline: los datos se guardan en el dispositivo del usuario, se puede acceder a ellos sin conexión y sincronizarlos con el servidor.

Desventajas de IndexedDB

  • API compleja: en comparación con el almacenamiento simple en el cliente como localStorage, la API de IndexedDB es relativamente compleja y requiere más código.

  • Procesamiento asíncrono: las operaciones se ejecutan de forma asíncrona, y los principiantes pueden no estar acostumbrados a manejar callbacks o Promesas.

  • IndexedDB es muy adecuado para aplicaciones que necesitan almacenar grandes cantidades de datos estructurados, especialmente aplicaciones web que desean admitir modo offline o manejar consultas complejas.

Otras extensiones