BASES DE DATOS EN JAVASCRIPT: OPCIONES Y CÓMO UTILIZARLAS

indexedDB que es una base de datos construida dentro del navegador: Características principales:
  • Almacenamiento local: Los datos se guardan en el dispositivo del usuario, lo que permite aplicaciones web offline.
  • Asíncrono: Usa operaciones asíncronas para no bloquear la interfaz de usuario.
  • Soporte para grandes volúmenes: A diferencia de localStorage, puede manejar datos más complejos y grandes.
  • Índices: Permite crear índices para búsquedas rápidas y eficientes.
  • Transacciones: Soporta transacciones para garantizar la integridad de los datos.
Usos comunes:
  • Almacenar datos de aplicaciones web progresivas (PWA).
  • Cachear recursos para mejorar el rendimiento.
  • Guardar estados de aplicaciones offline.
IndexedDB es más potente y flexible que localStorage o sessionStorage, pero también más complejo de usar.
//Abre y crea la base de datos
const request = indexedDB.open("ContactosDB", 1);

    // Configurar la estructura de la base de datos
    request.onupgradeneeded = function(event) {
 db = event.target.result;
 const objectStore = db.createObjectStore("contactos", { keyPath: "id", autoIncrement: true });
 objectStore.createIndex("nombre", "nombre", { unique: false });
 objectStore.createIndex("email", "email", { unique: true });
 console.log("Base de datos configurada correctamente");
    };

  // Cuando la base de datos se abre con éxito
    request.onsuccess = function(event) {
 db = event.target.result;
 console.log("Base de datos abierta con éxito");
    };

    // Función para agregar un contacto
    function addContact() {
 const contacto = {
   nombre: "Juan Pérez",
   email: "juan" + Math.random() + "@ejemplo.com"
 };

 const transaction = db.transaction(["contactos"], "readwrite");
 const objectStore = transaction.objectStore("contactos");
 const request = objectStore.add(contacto);

 request.onsuccess = function(event) {
   console.log("Contacto agregado con ID:", event.target.result);
 };

 request.onerror = function(event) {
   console.error("Error al agregar contacto:", event.target.errorCode);
 };
    }

    // Función para recuperar y mostrar todos los contactos
    function getContacts() {
 const contactList = document.getElementById("contactList");
 contactList.innerHTML = "; // Limpiar la lista

 const transaction = db.transaction(["contactos"], "readonly");
 const objectStore = transaction.objectStore("contactos");
 const request = objectStore.getAll();

 request.onsuccess = function(event) {
   const contactos = event.target.result;
   contactos.forEach(contacto => {
     const li = document.createElement("li");
     li.textContent = `ID: ${contacto.id}, Nombre: ${contacto.nombre}, Email: ${contacto.email}`;
     contactList.appendChild(li);
   });
 };

 request.onerror = function(event) {
   console.error("Error al recuperar contactos:", event.target.errorCode);
 };
    }

    // Función para eliminar un contacto (por ejemplo, el primero)
    function deleteContact() {
 const transaction = db.transaction(["contactos"], "readwrite");
 const objectStore = transaction.objectStore("contactos");
 const request = objectStore.delete(1); // Elimina el contacto con ID 1

 request.onsuccess = function(event) {
   console.log("Contacto eliminado con éxito");
   getContacts(); // Actualizar la lista
 };

 request.onerror = function(event) {
   console.error("Error al eliminar contacto:", event.target.errorCode);
 };
    }
Explicación del código:
  • Abrir la base de datos:
    • indexedDB.open("ContactosDB", 1) crea o abre una base de datos llamada "ContactosDB" con versión 1.
    • El evento onupgradeneeded se ejecuta si la base de datos no existe o necesita actualizarse. Aquí se crea un almacén de objetos (objectStore) llamado "contactos" con una clave primaria autoincremental (id) y dos índices (nombre y email).
  • Agregar un contacto:
    • La función addContact crea un objeto de contacto con un nombre y un correo electrónico (el correo incluye un valor aleatorio para evitar duplicados).
    • Usa una transacción en modo readwrite para agregar el contacto al almacén de objetos.
  • Recuperar contactos:
    • La función getContacts usa una transacción en modo readonly para obtener todos los contactos con getAll().
    • Los contactos se muestran en una lista en la página.
  • Eliminar un contacto:
    • La función deleteContact elimina el contacto con id igual a 1 usando una transacción en modo readwrite.
    • Luego, actualiza la lista de contactos mostrada.
Notas:
  • Soporte del navegador: IndexedDB es compatible con la mayoría de los navegadores modernos, pero asegúrate de probar en el navegador objetivo.
  • Asincronía: IndexedDB es completamente asincrónico, por lo que las operaciones usan eventos o promesas (este ejemplo usa eventos para simplicidad).
  • Persistencia: Los datos persisten en el navegador hasta que se eliminen explícitamente o se borren los datos del navegador.