IndexedDB

Desarrollo Web en Entorno Cliente

Curso 2014-2015
Salvador Camacho Soto

Indice

Qu es?

Soporte

Cmo guarda la informacin?

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 especificacin 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 transaccin.

Soporte

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

Cmo guarda la informacin?

La informacin es almacenada en la base de datos como
objetos dentro de Almacenes de Objetos.
Los Almacenes de Objetos no tienen una estructura
especfica, 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 condicin para los objetos es que contengan al
menos una propiedad declarada como ndice para que sea
posible encontrarlos en el Almacn 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 versin, y la base de
datos estar lista. Se usa el mtodo open() para crear la base de
datos, devuelve un objeto sobre el cual dos eventos sern
disparados para indicar el xito o los errores de la creacin de la
base de datos.
Una versin 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 nmero de versin
mayor que la base de datos almacenada existente.

Objetos y Almacenes de objetos

La cantidad de propiedades y cmo los objetos son
estructurados es irrelevante. Solo deben incluir al menos
una propiedad declarada como ndice para poder
encontrarlos dentro del Almacn de Objetos.
Los Almacenes de Objetos no tienen una estructura
especfica. Solo el nombre y uno o ms ndices, para poder
encontrar objetos en su interior.

ndices
Se usan para encontrar objetos en un Almacn de Objetos.
Se declara al crear el almacn de objetos, ser un ndice
comn para cada objeto almacenado, debe estar presente en
todos los objetos.
Se puede declarar todos los ndices que necesitemos usando
el mtodo 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 tenerlo
dos o ms objetos.

Transacciones
Existen muchas situaciones en las que trabajar directamente
con la base de datos puede causar mal funcionamiento o
incluso corrupcin de datos. Para prevenir que algo as
suceda, cada accin es realizada por medio de
transacciones.
El mtodo que genera una transaccin se llama
transaction().
Hay tres tipos de transaccin:
READ_ONLY, solo lectura (valor por defecto).
READ_WRITE, leer y escribir.
VERSION_CHANGE, actualiza la versin.

Abrir Base de Datos

El atributo indexedDB y el mtodo open() abren la base con
el nombre declarado y el nmero de versin. Si no existe la
base de datos o estoy abriendo una versin 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
transaccin, usando el mtodo transaction(), especificar el
Almacn de Objetos y el tipo de transaccin a realizar.
Se seleccionar el Almacn de Objetos con el mtodo
objectStore(). Se agrega un nuevo objeto usando el mtodo
add(). Se puede el mtodo 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 transaccin. El mtodo 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 mtodo 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 travs de un grupo de objetos
encontrados en la base de datos. Un cursor obtiene una lista
especfica de objetos de un Almacn de Objetos e
inicia 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 mtodo delete(), recibe un
valor y elimina el objeto con la clave correspondiente a ese
valor. Tiene que realizarse en una transaccin 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_edic
ion/updates.php

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

https://addons.mozilla.org/es/firefox/addon/indexeddbbrowser/ (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/