Poco a poco el soporte de HTML5 IndexDB va mejorando en los navegadores, recordemos que IndexDB nos permite tener una base de datos NoSQL en nuestro Browser. El API de IndexDB es bastante completo pero ya han comenzado a aparecer Wrappers, uno de los más utilizados es Dexie.js . Dexie nos permite trabajar con IndexDB de una forma cómoda.
Utilizando HTML5 IndexDB con Dexie.js
El primer paso a realizar es construir una nueva base de datos dentro del motor de IndexDB utilizando Dexie como wrapper, el código es muy sencillo:
$(document).ready(function() {
var baseDatos = new Dexie("arquitecturajava");
baseDatos.version(1).stores({
persona: "nombre,apellidos,edad"
});
baseDatos.open();
});
Acabamos de construir nuestra primera base de datos sobre IndexDB , nos apoyamos en la pestaña de recursos del navegador y abrimos la pestaña de IndexesDB para ver la estructura. En este caso hemos creado una colección que contiene el nombre, apellidos y edad de una persona.
Realizado este primer paso vamos a proceder a insertar un objeto dentro de la colección.
baseDatos.persona.put({
nombre: "pepe",
apellidos: "perez",
edad: 20
});
Por último procederemos a seleccionarle e imprimir su información en la consola.
baseDatos.persona.get("pepe").then(function(persona) {
console.log(persona);
})
El API de Dexie esta orientado al uso de promesas y simplifica de forma importante el API de HTML5 permitiendonos ahorrar tiempo de desarrollo.
Otros artículos relacionados: HTML5 LocalStorage , HTML5 Visibility API , HTML5 Data Attributes