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
¿cual sería el mejor programa para concatenar un servidor local con html5?
no te he entendido muy bien , si lo que quieres es tener un mini servidor web en local. Probablemente node y express.js son la mejor opcion
Hola, consulta servirá para hacer un sistema web?, exactamente cuando se requiera almacenar datos por si falla la conexión a una base de datos alojada en un hosting?
Podría ser , pero es más útil cuando simplemente no tienes conexión , es decir estas por ejemplo sin cobertura en el movil. Recuerda que html5 tiene un api para comprobar si tienes cobertura. En caso de no tenerla lo almacenas en local
Simple y elegante wrapper.
Excelente blog. Saludos desde Chile.
gracias 🙂