Un tutorial sobre el uso del almacenamiento del lado del cliente en aplicaciones web

Al crear aplicaciones web modernas, especialmente aplicaciones web progresivas (PWA), es fundamental tener una forma de almacenar datos sin conexión. IndexedDB es una poderosa base de datos del lado del cliente que permite que las aplicaciones web almacenen y recuperen datos, incluso cuando el usuario no está conectado. Esta guía lo guiará a través de los conceptos básicos de IndexedDB y le mostrará cómo crear, leer, actualizar y eliminar datos (operaciones CRUD) dentro de su aplicación web.

¿Qué es IndexedDB?

IndexedDB es una API de bajo nivel para el almacenamiento del lado del cliente de grandes cantidades de datos estructurados, incluidos archivos y blobs. A diferencia de localStorage, IndexedDB le permite almacenar tipos de datos complejos, no solo cadenas. Utiliza un modelo de base de datos transaccional asíncrono, lo que lo hace potente para aplicaciones que necesitan manejar grandes conjuntos de datos o sincronización de datos fuera de línea.

¿Por qué utilizar IndexedDB?

• Capacidades sin conexión: Ideal para aplicaciones web progresivas (PWA) y aplicaciones sin conexión.
• Capacidad de almacenamiento: IndexedDB puede almacenar muchos más datos en comparación con el almacenamiento local (que está limitado a entre 5 y 10 MB).
• Flexibilidad: Almacena objetos complejos como matrices, objetos e incluso blobs.
• Asincrónico: Las operaciones no bloquean el hilo de la interfaz de usuario, lo que significa que tu aplicación sigue respondiendo.

Primeros pasos: configurar IndexedDB

Profundicemos en los pasos principales para trabajar con IndexedDB. Cubriremos:

• Creando o abriendo una base de datos
• Creando almacenes de objetos (tablas)
• Añadiendo datos
• Leyendo datos
• Actualizando datos
• Eliminar datos

Paso 1: abrir una base de datos

Para interactuar con IndexedDB, primero debe abrir una conexión a la base de datos. Si la base de datos no existe, se creará.

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

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

Esto es lo que está pasando:

• indexedDB.open abre o crea la base de datos.
• onerror maneja cualquier error al abrir la base de datos.
• onsuccess se activa cuando la conexión a la base de datos se abre correctamente.
• onupgradeneeded se activa cuando es necesario actualizar la base de datos (por ejemplo, si es la primera vez que se abre la base de datos o si la versión cambia). Es donde defines tus almacenes de objetos (piensa en ellos como tablas en SQL).

Paso 2: Agregar datos a IndexedDB

Ahora que tenemos nuestra base de datos y almacén de objetos configurados, agreguemos algunos datos.

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

Esto es lo que está pasando:

• Creamos una transacción con acceso de 'lectura y escritura' para permitir modificaciones.
• El método add() se utiliza para insertar datos en el almacén de objetos.
• Escuchamos los eventos de éxito y error para confirmar si los datos se agregaron correctamente.

Paso 3: leer datos de IndexedDB

Leer datos de IndexedDB también es sencillo. Recuperemos el cliente que acabamos de agregar usando el método get().

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

Paso 4: Actualizar datos en IndexedDB

Para actualizar un registro existente, podemos usar el método put(), que funciona de manera similar a add() pero reemplaza el registro si la clave ya existe.

const updateCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.put(customer);

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: '[email protected]' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

Paso 5: Eliminar datos de IndexedDB

Finalmente, para eliminar un registro, use el método eliminar().

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

Conclusión

IndexedDB es una solución sólida para manejar el almacenamiento de datos del lado del cliente, especialmente en aplicaciones web sin conexión. Siguiendo esta guía, aprenderá cómo:

• Abrir y crear una base de datos
• Crear almacenes de objetos
• Agregar, leer, actualizar y eliminar datos

Con IndexedDB, puedes crear aplicaciones web más resistentes que almacenen datos localmente y funcionen incluso sin conexión a Internet.

Referencias:

1. Documentos web de MDN: API IndexedDB
   
   Una guía completa sobre cómo funciona IndexedDB, sus métodos API y casos de uso.
   
   Guía de MDN IndexedDB

2. Desarrolladores de Google: IndexedDB
   
   Un artículo detallado que cubre las mejores prácticas y el uso de IndexedDB para crear aplicaciones web con capacidad sin conexión.
   
   Desarrolladores de Google: IndexedDB

3. API de base de datos indexada W3C
   
   La especificación oficial del W3C que describe la implementación técnica y la estructura de IndexedDB.
   
   Especificaciones de IndexedDB del W3C

¡Estos recursos proporcionarán profundidad y contexto adicionales si deseas explorar más sobre IndexedDB más allá de este tutorial!

¡Feliz codificación!