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, al que añadiremos este formulario en el body de dicho documento HTML. El código completo se encuentra abajo y no contiene estilos css. Esto es lo que se verá en el navegador.

Hemos unido código javascript al documento HTML arriba mencionado. Este código javascript será el responsable de crear la base de datos local y del almacenamiento de datos en el navegador.

Por lo tanto lo primero que haremos es declarar la variable bd con ámbito global. Esto nos permitirá utilizarla dentro y fuera de las funciones que iremos viendo a continuación.

Pondremos el objeto window a la escucha del evento load. Dicho evento ´load´ será ejecutado una vez la página haya sido cargada por el navegador. Una vez que esto se ha producido, la función iniciar se activa. Esta línea de código se coloca al final del documento javascript.

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.

En definitiva, hay muchos más artículos y tutoriales que hablan acerca de indexeddb como la organización developer.mozilla.org donde se analiza esta API desde un punto de vista más amplio y más profundo para aquellos que quieren conocerla en más profundidad. En cambio, este artículo está hecho para estudiantes de programación y donde uno de sus ejercicios es el uso de indexeddb como base de datos local.

Comparte en tus Redes Sociales
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Email this to someone
email

Somos una empresa de Desarrollo y Diseño de páginas web en Canarias. Esta entrada es un ejercicio que los estudiantes de HTML se suelen encontrar en sus proyectos.