IndexedDB

Desarrollo Web en Entorno ClienteCurso 2014-2015

Salvador Camacho Soto

Indice

¿Qué es? Soporte ¿Cómo guarda la información? Bases de Datos Objetos y Almacenes de objetos Índices Transacciones Abrir Base de Datos Almacenar Objetos Leer Objetos Eliminar Objetos Buscar Objetos

¿Qué es?

IndexedDB es una nueva especificación de HTML5 que permite tener una base de datos en el navegador del usuario, de manera que podemos crear aplicaciones que guarden datos offline.

IndexedDB no es una base de datos relacional sino una base de datos orientada a objetos.

Esta construido sobre un modelo de base de datos transaccional. Todo lo que se hace en IndexedDB ocurre durante una transacción.

Soporte

http://caniuse.com/#search=indexeddb

¿Cómo guarda la información?

La información es almacenada en la base de datos como objetos dentro de Almacenes de Objetos. Los Almacenes de Objetos no tienen una estructura específica, solo un nombre e índices para poder encontrar los objetos en su interior. Estos objetos tampoco tienen una estructura definida, pueden ser diferentes unos de otros y tan complejos como necesitemos. La única condición para los objetos es que contengan al menos una propiedad declarada como índice para que sea posible encontrarlos en el Almacén de Objetos.

Bases de Datos

Cada base de datos es asociada con un ordenador y un sitio web, no existen usuarios para agregar o restricciones de acceso que debamos considerar.

Solo hay que especificar el nombre y la versión, y la base de datos estará lista. Se usa el método open() para crear la base de datos, devuelve un objeto sobre el cual dos eventos serán disparados para indicar el éxito o los errores de la creación de la base de datos.

Una versión debe ser asignada a la base de datos, para preparar al sistema para futuras migraciones. Para trabajar con versiones de bases de datos, tenemos el evento onupgradeneeded, se dispara cuando se carga una base de datos de un número de versión mayor que la base de datos almacenada existente.

Objetos y Almacenes de objetos

La cantidad de propiedades y cómo los objetos son estructurados es irrelevante. Solo deben incluir al menos una propiedad declarada como índice para poder encontrarlos dentro del Almacén de Objetos.Los Almacenes de Objetos no tienen una estructura específica. Solo el nombre y uno o más índices, para poder encontrar objetos en su interior.

Índices

Se usan para encontrar objetos en un Almacén de Objetos. Se declara al crear el almacén de objetos, será un índice común para cada objeto almacenado, debe estar presente en todos los objetos.

Se puede declarar todos los índices que necesitemos usando el método createIndex(nombre, propiedad, único).Nombre es un nombre con el que identificar al índice, Propiedad es la propiedad usada como índice, y único es un valor booleano que indica si el mismo valor pueden tenerlodos o más objetos.

Transacciones

Existen muchas situaciones en las que trabajar directamente con la base de datos puede causar mal funcionamiento o incluso corrupción de datos. Para prevenir que algo así suceda, cada acción es realizada por medio de transacciones.

El método que genera una transacción se llama transaction(). Hay tres tipos de transacción:

READ_ONLY, solo lectura (valor por defecto).READ_WRITE, leer y escribir. VERSION_CHANGE, actualiza la versión.

Abrir Base de Datos

El atributo indexedDB y el método open() abren la base con el nombre declarado y el número de versión. Si no existe la base de datos o estoy abriendo una versión superior se dispara el evento onupgradeneeded

var openRequest = indexedDB.open("notas",1); openRequest.onupgradeneeded = function(e) { db = e.target.result; var ob = db.createObjectStore("lista",

{keyPath: "clave" }); ob.createIndex('texto', 'texto',{unique: false});ob.createIndex('color', 'color',{unique: false});

}

Almacenar Objetos

Primero hay que abrir la base de datos, comenzar una transacción, usando el método transaction(), especificar el Almacén de Objetos y el tipo de transacción a realizar.

Se seleccionar el Almacén de Objetos con el método objectStore(). Se agrega un nuevo objeto usando el método add(). Se puede el método put() para modificar el objeto.

var open = indexedDB.open("notas",1); open.onsuccess = function (event) { thisDB = event.target.result; var ts = thisDB.transaction(["lista"],"readwrite"); var store = ts.objectStore("lista"); var request = store.add(objetoNota); }

Leer Objetos I

Igual que para almacenar hay que abrir la base de datos y comenzar una transacción. El método get() retorna el último objeto almacenado con la propiedad clave=key.

var open = indexedDB.open("notas",1); open.onsuccess = function (event) {

thisDB = event.target.result;var ts = thisDB.transaction(["lista"],"readonly");var store = ts.objectStore("lista");var request = store.get(key);request.onsuccess = function(event) {

escribir(request.result);}

}

Leer Objetos II

El método get() solo retorna un objeto por vez (el último insertado). Para generar una lista de objetos se usan los cursores.

Los cursores son una alternativa ofrecida por la API para obtener y navegar a través de un grupo de objetosencontrados en la base de datos. Un cursor obtiene una lista específica de objetos de un Almacén de Objetos einicia un puntero que apunta a un objeto de la lista a la vez.

Leer Objetos III

var open = indexedDB.open("notas",1);open.onsuccess = function (event) {

thisDB = event.target.result;var ts = thisDB.transaction(["lista"],"readonly");var store = ts.objectStore("lista");

store.openCursor().onsuccess = function(event) {var cursor = event.target.result;if (cursor) {

escribir(cursor.value);cursor.continue();

}}

}

Eliminar Objetos I

Para eliminar objetos se usa el método delete(), recibe un valor y elimina el objeto con la clave correspondiente a ese valor. Tiene que realizarse en una transacción el tipo READ_WRITE para poder eliminar el objeto.

var open = indexedDB.open("notas",1); open.onsuccess = function (event) { thisDB = event.target.result; var ts = thisDB.transaction(["lista"],"readwrite"); var store = ts.objectStore("lista");

var request = store.delete(indice); }

Eliminar Objetos II

Para borrar todos objetos de la base de datos genero un cursor y borro todos los elementos recorriendo el listado.

var open = indexedDB.open("notas",1); open.onsuccess = function (event) {

thisDB = event.target.result;var ts = thisDB.transaction(["lista"],"readwrite");var store = ts.objectStore("lista");store.openCursor().onsuccess = function(event) {

var cursor = event.target.result;if (cursor) {

var request = store.delete(cursor.value.clave); cursor.continue();}

} }

Recursos

El gran libro de HTML5, CSS3 y JavaScript

de Juan Diego Gauchat (OJO pdf desactualizado)

http://www.formasterminds.com/gran_libro_de_html5_1ra_edicion/updates.php

http://jsfiddle.net/salvacam/ejzfcq6r/ (Ejemplo)

https://addons.mozilla.org/es/firefox/addon/indexeddb-browser/ (visor para firefox)

Ejemplos http://www.mozilla-hispano.org/ejemplo-de-como-usar-indexeddb/

http://www.html5rocks.com/es/tutorials/indexeddb/todo/

http://www.returngis.net/2012/11/indexeddb/