IndexedDB

1. República Bolivariana de Venezuela
Ministerio del Poder Popular para la Educación Universitaria
Universidad Alejandro de Humboldt
Asignatura: Técnicas de programación
Sección: DCM-801
Guía de Construct 2
Profesor(a): Autores(s):
Mena Miguel Carreño Alex C.I. 22.017.962
Caracas, 28 de Julio del 2016

2. IndexedDB
IndexedDB es la API que HTML5 proporciona a los programadores para poder trabajar
con una base de datos desde la propia aplicación web, sin tener que conectarnos a ningún
servidor, disponible offline (en entornos sin conexión web) y persistente (al cerrar la aplicación,
el contenido no se borra). Esta base de datos local es en la actualidad utilizada en reemplazo
de la webSQL.
Como funciona:
IndexedDB no es una base de datos propiamente dicha, por lo que no tendremos
tablas, ni estructuras de datos al estilo SQL. IndexedDB es más bien una serie de colecciones
de objetos.
Por un lado, tenemos un mega-contenedor, que sería lo que habitualmente conocemos
como base de datos, por supuesto, podemos tener varios mega-contenedores. Dentro de
nuestro contenedor, no tenemos tablas, lo que tenemos son colecciones de objetos. Por
supuesto, podemos tener varias colecciones en cada base de datos. Al estar hablando de
colecciones de objetos, el contenido de nuestras tablas no serán tuplas sino que serán objetos.
Manejar el IndexedDB:
1. Crear nuestra base de datos, debemos tener listo nuestro documento HTML, abrir las
etiquetas <script></script> para comenzar a trabajar.
2. El objeto indexedDB que contiene todos los métodos y propiedades necesarias para
trabajar con nuestra base de datos local.

3. 3. Debemos entender que, Javascript del lado del cliente entra en juego con los
diferentes navegadores web y no todos tienen disponible el objeto indexedDB en el
mismo lugar. Para arreglar este problema, lo primero que hacemos es definir
correctamente el objeto indexedDB, con la siguiente línea:
4. Ahora bien, crearemos nuestra base de datos o almacén de objetos y le agregamos los
índices a la tabla.
5. Las líneas de código abren primero la conexión a la base de datos, es decir, tenemos
el conector con la base de datos, esta función debemos llamarla al comenzar con el
body del documento HTM.

4. 6. Se utiliza la propiedad onupgradeneeded para crear la colección de objetos, Para
utilizarla tenemos que definirla como método para nuestro objeto dataBase. Creamos
una variable active la cual va a mantener el conector de la base de datos, manejamos
el conector para crear así nuestro almacén de objeto por lo cual le damos sus nombres.
Por ultimo creamos los índices del almacén y le damos alguna propiedad.
7. Una vez tengamos nuestro almacén de objetos creado, procedemos a crear una
función para cargar los objetos a nuestro almacén, esto es de la siguiente manera:

5. 8. Se realizan casi los mismos paso, creamos nuestra variable active que contendrá el
conector a la base de datos, luego manejaremos la propiedad transaction puesto que
esta es utilizada para manejar los datos directamente, esta propiedad recibe dos
parámetros, el nombre del almacén de objetos con el que se va a trabajar y la función
que se hará con él, ya sea solo de lectura o de escritura, en este caso será de escritura
ya que vamos a agregar los objetos a nuestro almacén.
9. Con la variable ob le indicamos nuevamente que solamente trabajaremos con el
almacén de respuestas. Luego creamos un array de datos, donde estarán los objetos
que cargaremos posteriormente a nuestro almacén. Para agregar los objetos a nuestro
almacén utilizamos un ciclo for, el cual nos recorre el array y con la función .put
ingresamos los objetos a los índices los cuales corresponde.
10. Ya tenemos creado nuestro almacén de datos, y hemos podido cargar los datos en
nuestro almacén, hay que tener en cuenta que la función add(); debe de estar señalada
en el botón que utilizaremos para cargar los datos.

6. 11. Ahora bien, la última función importante para manejar nuestro almacén de datos es
poder leer esos objetos y utilizarlos en nuestro documento HTML. Para ello
necesitaremos crear un array nuevo en la función para guardar los objetos de nuestro
almacén de datos.
12. Creamos la función loadAll(), seguimos los mismos pasos utilizamos el conector con
la base de datos, la propiedad de transaction para manejar los datos, le indicamos con
que almacen vamos a trabajar y el tipo de función que utilizaremos en este caso será
solo de lectira ‘readonly’.
13. Creamos una función dentro de la función loadAll() en donde manejaremos nuestro
almacén con la variable ob, y le indicamos la propiedad a utilizar en este caso la
openCursor(), esta propiedad funciona como el comúnmente conocido For each.
14. Dentro de la función tenemos que recuperar el objeto, por ello utilizamos una variable
result para luego identificar si es null, si no lo es lo agregamos a nuestro array
elementos.

7. 15. Utilizamos .push para agregar los elementos a nuestro array, pero también debemos
indicarle que continue agregando todos los elementos que consiga, por ende
utilizamos .continue();
16. De esta manera ya podríamos manejar los elementos de nuestro almacén en el
documento HTML, para ello aplicamos la línea de código anterior. Llamamos a data
y si se completa la operación hará lo siguiente: crearemos una variable que contendrá
lo que queremos mostrar en nuestro documento HTML.
17. Un dato importante es saber cómo mostrar un elemento propio de nuestro almacén,
para ello hacemos el llamado del array en donde lo almacenamos el cual es elementos[
] le indicamos que posición queremos que nos muestre y por ultimo le indicamos que
a que índice pertenece.

8. 18. Por último, mostraremos nuestra variable en el documento HTML. Para ello
llamamos al documento y le indicamos que vamos a seleccionar una etiqueta como
un ID que hayamos creado para indicarle de esta manera en que parte del body de
nuestra página aparecerá la información y hacemos el llamado a innerHTML.