IndexedDb

IndexedDbAlmacenamiento (de verdad) en local en HTML5Eduard TomsDeveloper @ Plain Concepts http://plainconcepts.com@eiximenis Escuela IT - http://escuela.it

Qu es IndexedDbAlmacenamiento de datos en local

No relacional (nada de tablas, joins o SQL)

Almacena objetos JavaScript

Rpido y vlido para grandes volmenes de datos

Conceptos IndexedDbIndexedDb usa almacenamiento (clave, valor)Todas las operaciones son transaccionalesLa API es totalmente asncronaLas peticiones asncronas se modelan como objetos requestLos objetos request usan eventos DOM para comunicar xito o fallo.Los valores de IndexedDb son objetos JavaScriptEs un modelo no-relacional (no SQL)

Base de DatosUna base de datos contiene uno o ms almacenes de objetos.

Tiene un nombre y una versin

IndexedDb est preparado para cambios de esquema

Las BBDD son durables** Bueno... casi durables

Abrir una BBDDMtodo open de window.IndexedDB

Devuelve una requestoncompleteEn evt.target.result tenemos la BBDD (objecto IDBDatabase)onerror

Borrar una BBDDEl mtodo deleteDatabase del objeto indexedDB borra una base de datos

indexedDB.deleteDatabase(my-db).onsuccess = function(evt) {...}

Evento onupgradeneededCuando la versin local de la BBDD no coincide con la solicitada se ejecuta este evento.En evt.target.result tenemos la BBDD (objecto IDBDatabase)

Aqu debemos crear todos los almacenes necesarios segn la versin indicada.

Evento onupgradeneededEn dicho evento no tenemos que recrearla toda en este evento.Solo los cambios necesarios para pasar a la versin pedida.

La funcin gestora de onupgradeneeded debe estar preparada para preguntar qu hay en la BBDD y actualizar lo que falte de almacenes y ndices.

Evento onupgradeneededLa propiedad objectStoreNames de la base de datos devuelve los nombres de todos los object stores existentes.

Para obtener un objectStore debemos hacerlo a travs de la transaccin de upgradevar store = evt.currentTarget.transaction.o bjectStore(xxx)

Crear almacenesObtener una referencia a la BBDD

Usar mtodo createObjectStore(nombre, opciones)Opciones contiene keyPath o autoIncrementkeyPath: name -> Establece name como la propiedad indexada (nica)autoIncrement: id -> Establece id como una propiedad autoincremental

createObjectStore("note", { keyPath: "id", autoIncrement:true });

Eso devuelve una referencia al object store

Aadir datosLos datos se aaden a un almacen

Debe crearse una transaccin db.transaction(stores, mode)stores -> String con nombre de store o array con nombre de n storesModereadonlyreadwritereadwriteFlush (FF only)Una vez se tiene la Tx se obtiene el objectstore con tx.objectstore(name)

Aadir datosLlamada al mtodo add del objectstore

Eso devuelve una request (asncrono)

Gestionar los eventosonsuccessonerror

Errores en transaccionesLos eventos de IndexedDB fluyen hacia arriba

Si hay un error insertando un datoSe ejecuta onerror de la request correspondienteSe ejecuta onerror de la transaccin correspondienteSe ejecuta onerror de la bbdd correspondiente

Lectura de datosSe realiza tambin en el contexto de una transaccin

Se usa el mtodo get del almacn para obtener el elemento asociado a una claveEl mtodo get devuelve una request (onsuccess, onerror)

db.transaction(store).objectstore(store).get(key-value).onsuccess = function(evt) { var data = evt.target.value;}

Lectura de datos - cursoresEl cursor se usa para iterar sobre los elementos de un almacn

Se obtiene a partir del mtodo openCursor de un almacnEl mtodo openCurso devuelve una requestSiempre dentro del contexto de una transaccin

var r = db.transaction(store).objectStore(store).openCursor();r.onsuccess = function(evt) { var c = event.target.result;}

Lectura de datos - cursorescursor.value -> Valor actual del cursorcursor.continue() -> Avanza al siguiente elementocursor.advance() -> Avanza al siguiente elemento n veces

Lectura de datos - ndicesPara buscar a sobre los valores de una propiedad se requiere un ndice montado sobre esta propiedad

El mtodo createIndex del almacn permite definir un ndice sobre l.createIndex(name, path, options)

Lectura de datos - ndicesname -> Nombre del ndicepath -> Propiedad sobre la que se crea el ndiceoptionsunique -> true / false (si el ndice es nico)multiEntry -> Si vale true permite operar con ndices sobre arrays

Lectura de datos - ndicesEl mtodo index del objectStore permite obtener un ndicestore.index(name)

El ndice expone los mtodosget -> Obtiene el elemento con el valor del ndice indicado (nico)openCursor -> Obtiene un cursor que itera sobre los elementos del almacn pero segn el ndice.

Cursores - RangosEl mtodo openCursor puede recibir un rango como parmetro. Eso devuelve un cursor que itera solamente dentro de ese rango.

Para construir el rango se usa IDBKeyRange

Cursores - RangosRangoCodeClaves xIDBKeyRange.upperBound(x)Claves < xIDBKeyRange.upperBound(x, true) Claves yIDBKeyRange.lowerBound(y)Claves > yIDBKeyRange.lowerBound(y, true)Claves x && yIDBKeyRange.bound(x, y)Claves > x &&< yIDBKeyRange.bound(x, y, true, true)Claves > x && yIDBKeyRange.bound(x, y, true, false)Claves x &&< yIDBKeyRange.bound(x, y, false, true)Clave = zIDBKeyRange.only(z)

Eliminar datosMtodo delete(key) del objectStore elimina el objeto con la clave indicada

Como siempre, dentro del contexto de una transaccin

var req = db.transaction(store, readwrite).objectStore(store).delete(key);req.onsuccess = function(evt) {...}

Modificar datosEl mtodo put del almacn permite modificar datos

Como siempre... Dentro de una transaccin ;-)

var store = db.transaction(store).objectStore(store);store.put(data).onsuccess = function(evt) {...}