Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreAprende el API IndexedDB de HTML5
Rating: 4.4 out of 54.4(34 ratings)
7,393 students
Aprende el API IndexedDB de HTML5
La especificación para el manejo de base de datos en navegadores.
Created byFrancisco Javier Arce Anguiano
Last updated 4/2026
Spanish
What you'll learn
- El alumno se familiarizará con los principales términos en el manejo del API IndexedDB
- El alumno realizará una sencilla aplicación de Altas, Bajas y Cambios con IndexedDB
- El alumnos aprenderá a manejar las versiones, añadir índices entre otras actividades con IndexedDB
- El alumno desarrollará una aplicación de control de actividades con IndexedDB
Explore related topics
Course content
6 sections • 48 lectures • 5h 5m total length
- Bienvenida al curso del API IndexedDB de HTML54:05
- Introducción a IndexedDB8:18
En 2010 se dejó de dar soporte a WebSQL (SQLite en navegadores).
La especificación para el manejo de base de datos en navegadores es IndexedDB.
Tanto WebSQL como IndexedDB son soportados para dispositivos móviles.
- También se puede utilizar LocalStorage y SessionStorage, peo son más bien para almacenar cadena.
- El almacén de objetos en IndexedDB5:26
- Almacén de objetos: Es el lugar donde los objetos quedan en forma persistente. Su nombre de ser único y válido en JavaScript.
- Los objetos son almacenados en forma ordenada en base a las llaves.
- Un almacén de objetos puede tener un generador de llaves y una ruta de llaves.
- Si el almacén de objetos utiliza una ruta de llaves, éstas pueden ser internas o externas.
- Manejo de versiones de la base de datos en IndexedDB7:30
Toda base de datos tiene una versión, iniciando con la versión 1.
Sólo se puede tener una versión. Las versiones son manejadas en un número entero, no fracciones (1.0.0 no es aceptado).
Si se desea crear otra versión, se realiza al abrir la base de datos.
Al abrir una base de datos se disparan tres eventos:
Un evento si la apertura fue exitosa (success)
Un evento si la apertura fue erronea (error)
Un evento si hay un cambio de versión (upgradeneeded).
El único momento cuando se puede actualizar o modificar el esquema de la base de datos, es en el evento upgradeneeded.
- Las transacciones dentro de la base de datos IndexedDB5:24
Una transacción es un conjunto determinado de operaciones de acceso y modificación de datos sobre una base de datos.
Cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.
Los tres modos de transacción son: readwrite, readonly y versionchange.
La única manera de crear y borrar almacenes de objetos es usar una transacción versionchange.
Una solicitud (request) es una operación por medio de la cual se lee o se escribe en una base de datos.
Toda solicitud representa una y solo una operación de lectura o escritura.
Se pueden escribir en forma independiente o unidas por medio de un punto.
- Los índices en la base de datos IndexedDB2:41
Un índice es un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado.
El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado.
Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado.
Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.
Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.
- El concepto de llaves en IndexedDB4:24
La llave es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos.
El almacén de objetos puede derivar una llave desde uno de tres orígenes:
un generador de llaves (autoIncrement),
una ruta de llave (keyPath) y
- un valor indicado de forma explícita.
- El manejo de los cursores en IndexedDB3:29
Un cursor es un mecanismo para iterar a través de múltiples registros con un rango de llaves.
El cursor tiene un origen que indica que índice o almacén de datos está iterando.
El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro.
Un rango de llaves es un intervalo continuo sobre algún tipo de datos utilizado para las llaves.
Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves.
- Los rangos pueden limitarse o filtrarse con umbrales o rangos inferiores y superiores.
- Apuntes de la primera sección0:02
En esta clase encontrarás los recursos de la sección en los recursos anexos
- Introducción a IndexedDB
- Los pasos para realizar la aplicación de Altas, Bajas y Cambios con IndexedDB4:57
Los pasos básicos para trabajar con IndexedDB son los siguientes:
Validar el navegador.
Abre una base de datos.
Crea un almacén de objetos en la base de datos.
Inicia una transacción y hace una petición (request) que hace alguna operación de la base de datos, tal como añadir o recuperar datos.
Espere a que se complete la operación por el listener de la clase correcta de eventos DOM .
Hace algo con el resultado (el cual puede ser encontrado en el objeto de request).
- La validación de IndexedDB en los navegadores8:02
Algunos navegadores aún utilizan el prefijo del fabricante para manejar IndexedDB.
Estas versiones antiguas por lo general aún tienen buggs, por lo que se recomienda mejor no soportarlas
- La apertura de la base de datos IndexedDB10:23
Podemos generar una llave por medio de un generador de llaves (autoincrement) o un camino de llaves (keyPath).
Sin keyPath y sin autoincrement: El control lo tiene el usuario, por ejemplo, las claves naturales, como matrícula del estudiantes, placas de un auto, número de empleado, etc.
Con keyPath sin autoincrement: Solo se pueden almacenar objetos JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de acceso de clave.
Con autoincrement, sin keypath: Este almacén de objetos puede contener cualquier tipo de valor. La clave se genera automáticamente, o puede proporcionar un argumento de clave independiente si desea utilizar una clave específica natural, como la matrícula del estudiante.
Con autoincrement y con keypath: Este “almacén de objetos” sólo puede contener objetos JavaScript. Normalmente se genera una clave y el valor de la clave generada se almacena en el objeto en una propiedad con el mismo nombre que la ruta de acceso de clave. Sin embargo, si una propiedad ya existe, el valor de esa propiedad se utiliza como clave en lugar de generar una nueva clave.
- Crear un almacén de objetos u objectStore7:24
En el evento onupgradeneeded no solo podemos modificar la estructura de la base de datos, también podemos añadir, modificar y borrar objetos, así como crear o eliminar índices.
Con el método createObjectStore() creamos los almacenes de datos pasando dos parámetros: el nombre y las opciones de las llaves.
Este último parámetro es opcional.
Las transacciones pueden ser:
readwrite
readonly
versionchange
- Crear la transacción y la validación de datos8:10
El resultado de una solicitud generada a partir de una llamada add () es la clave del valor que se agregó.
Tenga en cuenta que la función add () requiere que ningún objeto ya esté en la base de datos con la misma clave.
Si está intentando modificar una entrada existente, o no le importa si ya existe, puede usar la función put ().
- Añadir un objeto a la base de datos8:53
El resultado de una solicitud generada a partir de una llamada add () es la clave del valor que se agregó.
Tenga en cuenta que la función add () requiere que ningún objeto ya esté en la base de datos con la misma clave.
Si está intentando modificar una entrada existente, o no le importa si ya existe, puede usar la función put ().
- Desplegar la información con un cursor, primera parte7:41
La función openCursor() toma varios argumentos.
En primer lugar, puede limitar el rango de elementos que se recuperan utilizando un objeto de rango de clave.
En segundo lugar, puede especificar la dirección que desea iterar.
En el ejemplo anterior, estamos iterando sobre todos los objetos en orden ascendente.
Si quieres seguir “barriendo” el cursor, entonces tienes que llamar al método continue () en el cursor.
Cuando haya llegado al final de los datos (o si no hay entradas que coincidan con su solicitud openCursor ()) todavía obtiene una devolución de llamada de éxito, pero la propiedad de resultado es indefinida.
Un patrón común con los cursores es recuperar todos los objetos en un almacén de objetos y agregarlos a un arreglo, como esto:
- Desplegar la información con un cursor, segunda parte10:01
La función openCursor() toma varios argumentos.
En primer lugar, puede limitar el rango de elementos que se recuperan utilizando un objeto de rango de clave.
En segundo lugar, puede especificar la dirección que desea iterar.
En el ejemplo anterior, estamos iterando sobre todos los objetos en orden ascendente.
Si quieres seguir “barriendo” el cursor, entonces tienes que llamar al método continue () en el cursor.
Cuando haya llegado al final de los datos (o si no hay entradas que coincidan con su solicitud openCursor ()) todavía obtiene una devolución de llamada de éxito, pero la propiedad de resultado es indefinida.
Un patrón común con los cursores es recuperar todos los objetos en un almacén de objetos y agregarlos a un arreglo, como esto:
- Borrar un objeto del almacén en IndexedDB8:18
Eliminar datos es muy similar a los procesos que hemos revisado:
- Leer un objeto para modificarlo en IndexedDB8:58
Podemos leer un solo objeto de la base de datos por medio del método get(), anexado a una transacción.
- Modificar un objeto en una base de datos IndexedDB3:24
Por medio del método put() podemos guardar un objeto, si este no existe, o modificarlo, si es que este ya existe.
- Apuntes de la segunda sección0:02
En esta clase encontrará los apuntes de la segunda sección
- Una aplicación básica de ABC con IndexedDB
- Crear índices a un almacén de objetos4:57
Un índice le permite buscar los valores almacenados en un almacén de objetos utilizando el valor de una propiedad del objeto almacenado en lugar de la clave del objeto.
Los índices tienen la capacidad de imponer restricciones simples en los datos almacenados.
Al establecer el indicador único al crear el índice, el índice asegura que no se almacenen dos objetos con ambos que tengan el mismo valor para la ruta de clave del índice.
Crear un índice:
objectStore.createIndex("autor", "autor", { unique: false });
objectStore.createIndex("titulo", "titulo", { unique: true });
- Controlar la versión de la base de datos en IndexedDB5:56
Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.
Tenemos los siguientes métodos:
only: lee una llave específica.
lowerBound: lee de la llave específica hacia abajo.
upperBound: lee de la llave específica hacia arriba
bound: lee un rango de llaves, entre llave inicial y la llave final.
Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.
- El objeto IDBKeyRange para seleccionar un rango de objetos10:17
Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.
Tenemos los siguientes métodos:
only: lee una llave específica.
lowerBound: lee de la llave específica hacia abajo.
upperBound: lee de la llave específica hacia arriba
bound: lee un rango de llaves, entre llave inicial y la llave final.
Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.
- El objeto IDBKeyRange, segunda parte9:51
Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.
Tenemos los siguientes métodos:
only: lee una llave específica.
lowerBound: lee de la llave específica hacia abajo.
upperBound: lee de la llave específica hacia arriba
bound: lee un rango de llaves, entre llave inicial y la llave final.
Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.
- El objeto IDBKeyRange, tercera parte10:47
Por medio del objeto IDBKeyRange podemos leer rangos en un cursor.
Tenemos los siguientes métodos:
only: lee una llave específica.
lowerBound: lee de la llave específica hacia abajo.
upperBound: lee de la llave específica hacia arriba
bound: lee un rango de llaves, entre llave inicial y la llave final.
Todos los métodos tienen un segundo parámetro (o tercero y cuarto como “bound) donde “false” incluye a la llave y “true” no los incluye.
- El manejo de los cursores e índices en IndexedDB7:52
- Por medio del método clear() podemos eliminar todos los objetos del almacén.
- No se hace automáticamente ningún respaldo.
- No hay manera de “deshacer” esta operación.
- Cuidado.
- El método clear() para limpiar los objetos del almacén7:01
- Por medio del método clear() podemos eliminar todos los objetos del almacén.
- No se hace automáticamente ningún respaldo.
- No hay manera de “deshacer” esta operación.
- Cuidado.
- Borrar una base de datos con DeleteDatabase en IndexedDB4:48
- Por medio del método deleteDatabase() podemos eliminar los almacenes de datos .
- No se efectúa un respaldo automático.
- No hay forma de “deshacer” la operación.
- Cuidado!!!
- Bloquear la base de datos en el cambio de versión en IndexedDB3:39
- Cuando hay un cambio de versión de la base de datos, existe la posibilidad de que el usuario tenga varias pestañas o tabuladores en el mismo navegador, con lo cual puede haber problemas.
- Podemos enviarle un mensaje al usuario con el evento.
- Apuntes a la sección 30:02
En esta clase podrás encontrar los apuntes de la sección 3
- Afinar nuestra aplicación desarrollada con IndexedDB
- Revisión de la aplicación de control de actividades con IndexedDB4:52
Por medio de una base de datos IndexedDB realizaremos un sencillo sistema de control de actividades.
- Crear la base de datos de la aplicación de control de actividades7:30
En este video crearemos la base de datos y los manejadores de eventos relacionados.
- Crear los almacenes para la aplicación de control de actividades5:10
En este video crearemos el almacén de datos y un índice relacionado.
- Función para actualizar la fecha8:11
Por medio de un objeto Date() actualizaremos los campos de la fecha y crearemos un campo de tipo timestamp.
- Añadir los objetos a la base de datos de la aplicación9:29
En este video crearemos la rutina para insertar los objetos en la base de datos.
- Leer los objetos en un cursor7:07
Por medio de un cursor podemos leer todos los objetos de la base de datos para añadirlos a un vector o arreglo, previo a ser desplegados en una tabla.
- Algoritmo para recalcular los tiempos de las actividades10:25
Una vez que tenemos las actividades en un arreglo, procederemos a calcular los tiempos transcurridos, sobre todo cuando añadimos, modificamos o borramos una actividad.
- Calcular el tiempo transcurrido entre las actividades9:54
Ya que tenemos todos los tiempos transcurridos en milisegundos, tenemos que convertirlo en horas, minutos o segundos, que es un formato que es inteligible para los usuario.
- Desplegar la información con un cursor11:19
Una vez que contamos con los tiempos transcurridos en un formato inteligible para los usuarios, procedemos a desplegarlos en una tabla y mostrarlos en la pantalla.
- Desplegar los datos en una tabla6:43
Una vez que contamos con los tiempos transcurridos en un formato inteligible para los usuarios, procedemos a desplegarlos en una tabla y mostrarlos en la pantalla. (segunda versión).
- La rutina para modificar una actividad8:50
En esta clase procederemos a crear la rutina que lee el objeto relacionado con la acción y la desplegamos en las cajas de entrada para que el usuario pueda modificarlo.
- La rutina para actualizar los datos de un objeto modificado4:43
Una vez que el usuario ha modificado los datos, deberemos guardar los cambios en la base de datos IndexedDB.
- Borrar un objeto del almacén en IndexedDB5:49
En este video escribiremos la función para borrar el objeto seleccionado, previo a la confirmación del usuario.
- Eliminar los registros de la base de datos en IndexedDB6:26
La última rutina que escribiremos es borrar los almacenes de objetos, previa autorización del usuario ya que no hay forma de "deshacer" la operación.
- Seleccionar un color en una página web con ColorZilla3:08
ColorZilla es una herramienta que nos permita detectar un color de un elemento de una página web.
- IndexedDB de HTML5
- Despedida del curso API IndexedDB de HTML52:42
Con este video damos por concluido el curso de IndexedDB. Hasta pronto.
- Ejercicios del curso IndexedDB0:03
Requirements
- Conocimientos básicos en HTML, CSS y JavaScript
- Conocimientos básicos de desarrollo web
Description
En 2010 se dejó de dar soporte a WebSQL (SQLite en navegadores). La especificación de HTML5 para el manejo de base de datos en navegadores es IndexedDB. Tanto WebSQL como IndexedDB son soportados para dispositivos móviles. También se puede utilizar LocalStorage y SessionStorage, pero son más bien para almacenar cadenas. Esta base de datos, que no utiliza el lenguaje SQL, nos permite de manera potente, el manejo de datos de manera sencilla.
Los objetivos de este curso son:
- El alumno se familiarizará con los principales términos en el manejo del API IndexedDB
- El alumno realizará una sencilla aplicación de Altas, Bajas y Cambios con IndexedDB
- El alumnos aprenderá a manejar las versiones, añadir índices entre otras actividades con IndexedDB
- El alumno desarrollará una aplicación de control de actividades con IndexedDB
Revisaremos términos que no se manejan en las bases tradicionales como MySQL, donde desarrollamos nuestras estructuras con tablas. En IndexDB utilizaremos almacenes de objetos, donde podemos guardar estructuras de datos diferentes. También utilizaremos cursores para almacenar la lectura de los mismos.
Este curso no es un curso básico. Usted debe tener bases en las herramientas HTML, CSS3 y JavaScript. Este curso está dirigido a desarrolladores web que desee crear aplicaciones con el manejo de base de datos. Los presentes ejercicios son fácilmente exportables a dispositivos móviles con herramientas como Phonegap.
Who this course is for:
- Desarrolladores web con conocimientos básicos en HTML5, CSS y JavaScript