Blog de Gonzalo

Blog de programación de Gonzalo López

BASE DE DATOS EN JAVASCRIPT

JAVASCRIPT

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.

Compartir en twitter