Cómo usar IndexedDB como base de datos

IndexedDB es una base de datos NoSQL del lado del cliente que le permite almacenar y recuperar datos estructurados dentro del navegador web de un usuario.

IndexedDB proporciona varias ventajas, como una memoria más grande y almacenamiento y recuperación de datos fuera de línea sobre otras opciones de almacenamiento, como localStorage. Aquí aprenderá a usar IndexedDB como base de datos.

Configuración de su base de datos

Para crear la base de datos, debe crear una solicitud abierta utilizando IndexedDB abierto método. El abierto método devuelve un IDBOpenDBRequest objeto. Este objeto proporciona acceso a la éxito, error, y actualización necesariaeventos emitidos de la operación abierta.

El abierto El método toma dos argumentos: un nombre y un número de versión opcional. El argumento de nombre representa el nombre de su base de datos. El número de versión especifica la versión de la base de datos con la que su aplicación espera trabajar. El valor por defecto es cero.

Aquí se explica cómo crear una solicitud abierta:

constante solicitud abierta = indexedDB.open("usersdb", 1);

Después de crear la solicitud abierta, debe escuchar y manejar los eventos en el objeto devuelto.

El éxito El evento ocurre cuando crea la base de datos con éxito. Una vez emitido, obtiene acceso a su objeto de base de datos a través de evento.objetivo.resultado:

abrirSolicitud.onsuccess = función (evento) {
constante db = evento.objetivo.resultado;
consola.registro("Base de datos creada", db);
};

El ejemplo anterior maneja un evento de éxito al registrar el objeto de la base de datos.

El error El evento ocurre si IndexedDB encuentra un problema al crear la base de datos. Puede manejarlo registrando el error en la consola o usando otros métodos de manejo de errores:

abrirSolicitud.onerror = función (evento) {
// ...
};

El actualización necesaria El evento ocurre cuando crea la base de datos por primera vez o cuando actualiza su versión. Solo se dispara una vez, lo que lo convierte en el lugar ideal para crear un almacén de objetos.

Creación de un almacén de objetos

Un almacén de objetos es similar a una tabla en las bases de datos relacionales del lado del servidor. Puede utilizar un almacén de objetos para almacenar pares clave-valor.

Debe crear almacenes de objetos en respuesta a la actualización necesaria evento. Este evento se desencadena cuando crea una nueva versión de la base de datos o actualiza una versión existente. Esto garantiza que la base de datos esté configurada correctamente y actualizada antes de agregar datos.

Puede crear un almacén de objetos usando el createObjectStore método, al que puede acceder en una referencia de su base de datos. Este método toma el nombre del almacén de objetos y un objeto de configuración como argumentos.

En el objeto de configuración, debe definir una clave principal. Puede definir una clave principal definiendo una ruta de clave, que es una propiedad que siempre existe y contiene un valor único. Alternativamente, puede usar un generador de claves configurando el keyPath propiedad a “identificación" y el autoincremento propiedad a verdadero en su objeto de configuración.

Por ejemplo:

openRequest.onupgradeneeded= función (evento) {
constante db = evento.objetivo.resultado;
// Crear un almacén de objetos
constante userObjectStore = db.createObjectStore("usuarioTienda", {
 clave: "identificación",
 autoincremento: verdadero,
 });
}

Este ejemplo crea un almacén de objetos llamado "UserStore" en su base de datos y establece su clave principal en una identificación de incremento automático.

Definición de índices

En IndexedDB, un índice es una forma de organizar y recuperar datos de manera más eficiente. Esto le permite buscar en el almacén de objetos y ordenarlo según las propiedades indexadas.

Para definir un índice en un almacén de objetos, utilice el crearÍndice() método de un objeto de almacenamiento de objetos. Este método toma un nombre de índice, un nombre de propiedad y un objeto de configuración como argumentos:

userObjectStore.createIndex("nombre", "nombre", { único: FALSO });
userObjectStore.createIndex("correo electrónico", "correo electrónico", { único: verdadero });

Este bloque de código anterior define dos índices, "nombre" y "correo electrónico" en el userObjectStore. El índice de "nombre" no es único, lo que significa que varios objetos pueden tener el mismo valor de nombre, mientras que el índice de "correo electrónico" es único, lo que garantiza que no haya dos objetos que puedan tener el mismo valor de correo electrónico.

He aquí un ejemplo completo de cómo puede manejar un actualización necesaria evento:

openRequest.onupgradeneeded= función (evento) {
constante db = evento.objetivo.resultado;
// Crear un almacén de objetos
constante userObjectStore = db.createObjectStore("usuarioTienda", {
 clave: "identificación",
 autoincremento: verdadero,
 }); 
// Crear índices
 userObjectStore.createIndex("nombre", "nombre", { único: FALSO });
 userObjectStore.createIndex("correo electrónico", "correo electrónico", { único: verdadero });
};

Agregar datos a IndexedDB

Una transacción en IndexedDB es una forma de agrupar múltiples operaciones de lectura y escritura en una sola operación. Para garantizar la coherencia y la integridad de los datos, si falla una de las operaciones dentro de una transacción, IndexedDB revierte todas las operaciones.

Para agregar datos a una base de datos IndexedDB, debe crear una transacción en el almacén de objetos en el que desea agregar los datos y luego usar el agregar() en la transacción para agregar los datos.

Puede crear una transacción llamando al transacción método en su objeto de base de datos. Este método toma dos argumentos: el nombre (s) de su almacén de datos y el modo de la transacción, que puede ser solo lectura (predeterminado) o leer escribir.

Luego, llama al tienda de objetos() en la transacción y pase el nombre del almacén de objetos al que desea agregar datos. Este método devuelve una referencia al almacén de objetos.

Finalmente, llama al agregar() método en el almacén de objetos y pase los datos que desea agregar:

constante agregar datos de usuario = (datos de usuario, db) => {
//Abrir una transacción
constante transacción = db.transacción("usuarioTienda", "leer escribir");
// Agregar datos al almacén de objetos
constante userObjectStore = transacción.objectStore("usuarioTienda");
// Hacer una solicitud para agregar datos de usuario
constante solicitud = userObjectStore.add (userData);
// Manejar un evento de éxito
 petición.con éxito = función (evento) {
//...
 };
// Manejar un error
 solicitud.onerror = función (evento) {
//...
 };
};

Esta función crea una transacción con el almacén de objetos "userStore" y establece el modo en "lectura y escritura". Luego, obtiene el almacén de objetos y agrega el datos del usuario a ello usando el agregar método.

Recuperación de datos de IndexedDB

Para recuperar datos de una base de datos IndexedDB, debe crear una transacción en el almacén de objetos del que desea recuperar los datos y luego usar el conseguir() o obtener toda() método en la transacción para recuperar los datos dependiendo de la cantidad de datos que desee recuperar.

El conseguir() El método toma un valor para la clave principal del objeto que desea recuperar y devuelve el objeto con la clave correspondiente de su almacén de objetos.

El obtener toda() El método devuelve todos los datos en un almacén de objetos. También toma una restricción opcional como argumento y devuelve todos los datos coincidentes de la tienda.

constante obtener datos de usuario = (identificación, base de datos) => {
constante transacción = db.transacción("usuarioTienda", "solo lectura");
constante userObjectStore = transacción.objectStore("usuarioTienda");
// Hacer una solicitud para obtener los datos
constante solicitud = userObjectStore.get (id);
 petición.con éxito = función (evento) {
consola.log (solicitud.resultado);
 };
 solicitud.onerror = función (evento) {
// Manejar el error
 };
};

Esta función crea una transacción con el almacén de objetos "userStore" y establece el modo en "solo lectura". Luego recupera los datos del usuario con la identificación correspondiente del almacén de objetos.

Actualización de datos con IndexedDB

Para actualizar datos en IndexedDB, debe crear una transacción con el modo de "lectura y escritura". Continúe recuperando el objeto que desea actualizar usando el conseguir() método. Luego modifique el objeto y llame al poner() en el almacén de objetos para guardar el objeto actualizado en la base de datos.

constante actualizar datos de usuario = (id, datos de usuario, db) => {
constante transacción = db.transacción("usuarioTienda", "leer escribir");
constante userObjectStore = transacción.objectStore("usuarioTienda");
// Hacer una solicitud para obtener los datos
constante getRequest = userObjectStore.get (id);
// Manejar un evento de éxito
 obtenerSolicitud.onsuccess = función (evento) {
// Obtener los datos del usuario antiguo
constante usuario = evento.objetivo.resultado;
// Actualizar los datos del usuario
 usuario.nombre = datos de usuario.nombre;
 usuario.email = userData.email;
// Hacer una solicitud para actualizar los datos
constante putRequest = userObjectStore.put (usuario);
 ponerSolicitud.onsuccess = función (evento) {
// Manejar el exito
 };
 ponerSolicitud.onerror = función (evento) {
// Manejar el error
 };
 };
 getRequest.onerror = función (evento) {
// Manejar el error
 };
};

Esta función crea una transacción para obtener y actualizar los datos de su base de datos.

Eliminación de datos de IndexedDB

Para eliminar datos de IndexedDB, debe crear una transacción con el modo de "lectura y escritura". Entonces llame al borrar() en el almacén de objetos para eliminar el objeto de la base de datos:

constante eliminar datos de usuario = (identificación, base de datos) => {
constante transacción = db.transacción("usuarioTienda", "leer escribir");
constante userObjectStore = transacción.objectStore("usuarioTienda");
// Hacer una solicitud para eliminar los datos
constante solicitud = userObjectStore.delete (id);
 petición.con éxito = función (evento) {
// Manejar el exito
 };
 solicitud.onerror = función (evento) {
// Manejar el error
 };
};

Esta función crea una transacción que elimina los datos con la identificación correspondiente de su almacén de objetos.

¿Debe usar IndexedDB o localStorage?

La elección entre IndexedDB y otras bases de datos del lado del cliente, como localStorage, depende de los requisitos de su aplicación. Use localStorage para el almacenamiento simple de pequeñas cantidades de datos. Elija IndexedDB para grandes conjuntos de datos estructurados que requieran consultas y filtrado.