JavaScript Academy · Lección

Apertura de una base de datos

Cree bases de datos y almacenes de objetos.

Apertura de una base de datos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es IndexedDB?

IndexedDB es una base de datos transaccional y de gran capacidad integrada en el navegador. A diferencia de localStorage (pequeño, solo admite cadenas y es síncrono), almacena objetos estructurados, admite índices y funciona de forma asíncrona.

Apertura de una base de datos

Abra (o cree) una base de datos con indexedDB.open(name, version). Esto devuelve un objeto de solicitud cuyos eventos informan del éxito o del error.

const request = indexedDB.open('notes-db', 1);

Los eventos de la solicitud

Una solicitud de apertura genera eventos que debe gestionar:

onsuccess — la base de datos está lista
onerror — la apertura ha fallado
onupgradeneeded — es necesario crear o actualizar el esquema

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded se ejecuta cuando se crea la base de datos por primera vez o aumenta su número de versión. Este es el único lugar donde puede modificar el esquema (crear o eliminar almacenes de objetos e índices).

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

Almacenes de objetos

Un almacén de objetos es similar a una tabla: un contenedor de registros. Créelo con db.createObjectStore(name, options) dentro de onupgradeneeded.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

El keyPath

El keyPath indica a IndexedDB qué propiedad de cada objeto es su clave principal. Los objetos almacenados deben tener esa propiedad y las claves deben ser únicas.

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

Claves autoincrementales

Si sus objetos no tienen una clave natural, permita que IndexedDB genere una con autoIncrement: true. Cada registro nuevo recibe el siguiente entero.

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

Comprobación de almacenes existentes

Dado que onupgradeneeded se ejecuta con cada aumento de versión, proteja la creación con db.objectStoreNames.contains para evitar errores al volver a ejecutarla.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

Conservación de la referencia db

Guarde el objeto de base de datos de onsuccess para que las operaciones posteriores puedan usarlo. Todas las lecturas y escrituras se realizan mediante esta instancia de db.

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

Gestión de aperturas bloqueadas

Si otra pestaña mantiene abierta una versión anterior, una actualización puede quedar blocked. Escuche onblocked y pida al usuario que cierre las demás pestañas.

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

Flujo de apertura

Para abrir IndexedDB, llame a open con un nombre y una versión, cree el esquema en onupgradeneeded y, después, obtenga db en onsuccess. A partir de ahí, ejecute transacciones para leer y escribir datos.

Comprobación rápida

Compruebe cuánto ha entendido sobre la apertura de una base de datos.

Repaso

Ha aprendido a abrir una base de datos de IndexedDB:

indexedDB.open(name, version) devuelve una solicitud.
Cree almacenes de objetos únicamente en onupgradeneeded.
keyPath establece la clave principal; autoIncrement genera las claves.
Guarde db desde onsuccess para usarlo posteriormente.
Gestione onerror y onblocked.

A continuación, transacciones y operaciones CRUD.

Preguntas frecuentes

¿La lección «Apertura de una base de datos» es gratis?

Sí — el texto completo de «Apertura de una base de datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Apertura de una base de datos»?

Cree bases de datos y almacenes de objetos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Apertura de una base de datos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy