IndexedDB la base de datos local en HTML5

Este artículo es acerca de la API IndexedDB que se trata de una base de datos a nivel local en tu ordenador. Esta API se ha establecido como estándar en las aplicaciones hechas con HTML5.

Tiene una serie de ventajas con respecto a a las BBDD tradicionales. Alguna de ellas es que no tiene que conectar con el servidor para devolver información, con lo que la respuesta es más rápida. Por otro lado, tiene más flexibilidad a la hora de almacenar datos, al no regirse por tablas.

Veamos un ejemplo donde crearemos una base de datos a nivel local en una página web. El usuario podrá insertar libros con los parámetros siguientes: título, autor, año e ISBN. Una vez esos datos sean almacenados, este podrá borrar un libro de dicha BBDD si así lo desea. 

En primer lugar crearemos un documento HTML. Este formulario es lo que se verá en el navegador.

Dentro de el documento arriba mencionado, se encuentra código javascript. Este será el responsable de que se lleve a cabo el almacenamiento de datos.

Declaramos la variable bd con ámbito global. Esto nos permitirá utilizarla dentro y fuera de las funciones.

Pondremos el objeto window a la escucha del evento load. Una vez que se cargue la página dicho evento se ejecuta. Por consiguiente la función iniciar se activa. Esta línea de código se coloca al final.

window.addEventListener(‘load’, iniciar, false)

Seguidamente declaramos las variables que se corresponden con los elementos del documento html como titulo, isbn, autor, etc. Se tiene en cuenta el valor id de cada elemento para su selección.

Con indexedDB.open(´Books´, 2) ; estamos creando la base de datos Books y en la versión 2. Esta se almacena en la variable request. 

Agregar y Borrar Datos en IndexedDB

La función agregar se encarga de recoger los valores que se insertan por parte del usuario y almacenarlos en la BBDD.

La función borrarClave() es la responsable de la eliminación de los datos de la BBDD de la clave que el usuario designe.