BASE DE DATOS EN 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.
- Almacenar datos de aplicaciones web progresivas (PWA).
- Cachear recursos para mejorar el rendimiento.
- Guardar estados de aplicaciones offline.
//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.
- 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.