Una API de bajo API IndexedDB

nivel
La API IndexedDB es un sistema de base de datos provista por HTML5 para guardar
grandes cantidades de datos estructurados, destinado a almacenar información indexada
en el ordenador del usuario.
Fue desarrollada como una API de bajo nivel con la intención de permitir un amplio
espectro de usos. Esto la convierte en una de las API más poderosa de todas, pero
también una de las más complejas.
El objetivo fue proveer la estructura más básica posible para permitir a los
desarrolladores construir librerías y crear interfaces de alto nivel para satisfacer
necesidades específicas. La estructura propuesta por IndexedDB es también diferente de
SQL u otros sistemas de base de datos populares.
La información es almacenada en la base de datos como objetos (registros) dentro de lo
que es llamado Almacenes de Objetos (tablas). Los Almacenes de Objetos no tienen una
estructura específica, solo un nombre e índices para poder encontrar los objetos en su
interior.
 API IndexedDB
BASE DE DATOS
La base de datos misma es simple, cada base de datos es asociada con un ordenador
y un sitio web o aplicación, no existen usuarios para agregar o restricciones de
acceso que debamos considerar.
Solo necesitamos especificar el nombre y la versión, y la base de datos estará lista.
El segundo aspecto que debemos considerar es la versión. La API requiere que una versión
sea asignada a la base de datos. Esto es para preparar al sistema para futuras migraciones.

OBJETOS Y ALMACENES DE OBJETOS

Lo que solemos llamar registros, en IndexedDB son llamados objetos. Estos
objetos incluyen propiedades para almacenar e identificar valores. Solo deben
incluir al menos una propiedad declarada como índice para poder
encontrarlos dentro del Almacén de Objetos.
Los Almacenes de Objetos (tablas) tampoco tienen una estructura específica.
Solo el nombre y uno o más índices deben ser declarados en el momento de
su creación para poder encontrar objetos en su interior más tarde.
ÍNDICES
API IndexedDB
Para encontrar objetos en un Almacén de Objetos necesitamos índices. Una forma fácil de
hacerlo es declarar el atributo clave en el método createObjectStore(). La propiedad
declarada como clave será un índice común para cada objeto almacenado en ese Almacén
de Objetos particular. Cuando declaramos el atributo clave, esta propiedad debe estar
presente en todos los objetos.

TRANSACCIONES
Un sistema de base de datos trabajando en un navegador debe contemplar algunas
circunstancias únicas que no están presentes en otras plataformas. El navegador puede
fallar, puede ser cerrado abruptamente, el proceso puede ser detenido por el usuario, o
simplemente otro sitio web puede ser cargado en la misma ventana.
El método que genera una transacción se llama transaction(). Para declarar el tipo
de transacción, contamos con los siguientes tres atributos:

MÉTODOS DE ALMACENES DE OBJETOS

Para interactuar con Almacenes de Objetos, leer y almacenar información, la API provee:
add(objeto) Este método recibe un par clave/valor o un objeto conteniendo varios pares clave/valor,
put(objeto) Este método es similar al anterior, excepto que si ya existe un objeto con el mismo valor de índice lo sobrescribe.
get(clave) Podemos leer un objeto específico del Almacén de Objetos usando este método.
delete(clave) Para eliminar un objeto del Almacén de Objetos seleccionado solo tenemos que llamar a este método con el
valor del índice del objeto a eliminar.
 API IndexedDB
Implementando IndexedDB
PLANTILLA
Como siempre, necesitamos un documento HTML y algunos estilos CSS para crear las cajas
en pantalla que contendrán el formulario apropiado y la información retornada. El
formulario nos permitirá insertar nuevas películas dentro de la base de datos
solicitándonos una clave, el título y el año en el que la película fue realizada.

ABRIENDO LA BASE DE DATOS

El atributo indexedDB y el método open() abren la base con el nombre declarado o crean una
nueva si no existe.

ALMACENES DE OBJETOS E ÍNDICES

A este punto debemos comenzar a pensar sobre la clase de objetos que vamos a almacenar y. Si
hacemos algo mal o queremos agregar algo en la configuración de nuestra base de datos en el
futuro deberemos declarar una nueva versión y migrar los datos desde la anterior, por lo que es
importante tratar de organizar todo lo mejor posible desde el principio

LEYENDO OBJETOS
Si el objeto es correctamente almacenado, el evento success es disparado y la función
mostrar() es ejecutada, esta función fue llamada dentro de una función anónima para
poder pasar la variable clave.
 API IndexedDB
Listando datos
CURSORES
Son datos. Un cursor obtiene una lista específica de objetos de un Almacén de Objetos e inicia un
puntero que apunta a un objeto de la lista a la vez, la API provee el método openCursor(). tiene
sus propios atributos y métodos para una alternativa ofrecida por la API para obtener y navegar a
través de un grupo de objetos encontrados en la base de manipular el cursor:
continue() mueve el puntero del cursor una posición y el evento success.
delete() elimina el objeto en la posición actual del cursor.
update(valor) es similar a put() pero modifica el valor del objeto en la posición actual del cursor.

CAMBIO DE ORDEN
Hay dos detalles que necesitamos modificar para obtener la lista que queremos. Esta es la propiedad
declarada como el atributo clave cuando el Almacén de Objetos películas fue creado, y es por tanto el
índice usado por defecto. Considerando esta situación, creamos otro índice en la función crearbd(). El
nombre de este índice adicional fue declarado como BuscarFecha y la propiedad asignada al mismo es
fecha. Este índice nos permitirá ordenar las películas de acuerdo al valor del año en el que fueron
filmadas.
Eliminando datos API IndexedDB
Hemos aprendido cómo agregar, leer y listar datos. Es hora de estudiar la posibilidad de eliminar objetos
de un Almacén de Objetos. Como mencionamos anteriormente, el método delete() provisto por la API
recibe un valor y elimina el objeto con la clave correspondiente a ese valor.
El código es sencillo; solo necesitamos crear un botón para cada objeto listado en pantalla y generar una
transacción READ_WRITE para poder realizar la operación y eliminar el objeto:

Buscando datos
Probablemente la operación más importante realizada en un sistema de base de datos es la búsqueda. El
propósito absoluto de esta clase de sistemas es indexar la información almacenada para facilitar su posterior
búsqueda.
Para obtener una lista específica de objetos desde el Almacén de Objetos, tenemos que pasar un rango como
argumento para el método openCursor(). La API incluye lainterface IDBKeyRange con varios métodos y
propiedades para declarar un rango y limitar los objetos retornados:
only(valor) Solo los objetos con la clave que concuerda con valor son retornados.
bound(bajo, alto, bajoAbierto, altoAbierto)debemos contar con valores que indiquen el comienzo y el final de la
lista, y además especificar si esos valores también serán incluidos.
lowerBound(valor, abierto) crea un rango abierto que comenzará por valor e irá arriba hasta el final de la lista.
upperBound(valor, abierto)Creará un rango abierto, pero los objetos retornados serán todos los que posean un
valor de índice menor a valor.
 API File
Almacenamiento de archivos
Los archivos son unidades de información que usuarios pueden fácilmente
compartir con otras personas. Los usuarios no pueden compartir el valor de
una variable o un par clave/valor como los usados por la API Web Storage, pero
ciertamente pueden hacer copias de sus archivos y enviarlos por medio de un
DVD, memorias portátiles, discos duros, transmitirlos a través de Internet.
Las opciones estaban limitadas a subir o descargar archivos ya existentes en
servidores u ordenadores de usuarios. No existía la posibilidad de crear
archivos, copiarlos o procesarlos en la we
hasta hoy.
Esta API posee una infraestructura de bajo nivel, y puede trabajar de forma
síncrona o asíncrona. La parte síncrona es usada con la API Web Workers y la
parte asíncrona está destinada a aplicaciones web convencionales.
API File es una vieja API que ha sido mejorada y expandida, está compuesta por
tres especificaciones: API File, API File: Directories & System, y API File:
Writer, pero esta situación puede cambiar con la incorporación de nuevas
especificaciones o incluso la unificación de algunas de las ya existentes.
 API File
Procesando archivos de usuario
Trabajar con archivos locales desde aplicaciones web puede ser peligroso. Los navegadores deben considerar medidas
de seguridad antes de siquiera contemplar la posibilidad de dejar que las aplicaciones tengan acceso a los archivos del
usuario. A este respecto, File API provee solo dos métodos para cargar archivos desde una aplicación: la etiqueta
<input> y la operación arrastrar y soltar.

PLANTILLA
En esta primera parte del capítulo vamos a usar la etiqueta <input> para seleccionar archivos, pero
usted puede, si lo desea, aprovechar la información en el Capítulo 8 para integrar estos códigos con
API Drag and Drop.

LEYENDO ARCHIVOS
Para leer archivos tenemos que usar la interface FileReader. Esta interface retorna un objeto con varios métodos
para obtener el contenido de cada archivo: readAsText(archivo, codificación) Para procesar el contenido como
texto podemos usar este método.

PROPIEDADES DE ARCHIVOS
El objeto enviado por el elemento <input> incluye varias propiedades para acceder a esta
información: name Esta propiedad retorna el nombre completo del archivo (nombre y extensión).
size Esta propiedad retorna el tamaño del archivo en bytes. type Esta propiedad retorna el tipo de
archivo, especificado en tipos MIME.
 API File
BLOBS
Un blob es un objeto representando datos en crudo. Fueron creados con el propósito
de superar limitaciones de Javascript para trabajar con datos binarios. Un blob es
normalmente generado a partir de un archivo, pero no necesariamente. Es una buena
alternativa para trabajar con datos sin cargar archivos enteros en memoria, y provee la
posibilidad de procesar información binaria en pequeñas piezas.

EVENTOS
El tiempo que toma a un archivo para ser cargado en memoria depende de su tamaño.
Para archivos pequeños, el proceso se asemeja a una operación instantánea, pero grandes
archivos pueden tomar varios segundos en cargar. Además del evento load ya estudiado, la API
provee eventos especiales para informar sobre cada instancia del proceso:
loadstart Este evento es disparado desde el objeto FileReader cuando la carga comienza.
progress Este evento es disparado periódicamente mientras el archivo o blob está siendo leído.
abort Este evento es disparado si el proceso es abortado.
error Este evento es disparado cuando la carga ha fallado.
loadend Este evento es similar a load, pero es disparado en caso de éxito o fracaso.
Creando archivos
API File
Contempla la posibilidad de crear nuevos archivos o directorios de esta API File:
Directories & System, la API reserva un espacio específico en el disco duro, un
espacio de almacenamiento especial en el cual la aplicación web podrá crear y
procesar archivos y directorios exactamente como una aplicación de escritorio lo
haría. El espacio es único y solo accesible por la aplicación que lo creó.

PLANTILLA
Necesitar un nuevo formulario con un campo de texto y un botón para crear y
procesar archivos y directorios.
EL DISCO DURO
El espacio reservado para la aplicación es como un espacio aislado, una pequeña
unidad de disco duro con su propio directorio raíz y configuración.
CREANDO ARCHIVOS
Esta función asigna el texto insertado en el elemento <input>a la variable nombre y crea un
archivo con ese nombre usando el método getFile(). Este método es parte de la interface
DirectoryEntry incluida en la API y provee un total de cuatro métodos para crear y manejar
archivos y directorios.
CREANDO DIRECTORIOS
Para crear un directorio (carpeta) en nuestro Sistema de Archivos, solo tenemos
que reemplazar el nombre getFile() por getDirectory().
LISTANDO ARCHIVOS
API File
El método createReader() nos permite acceder a una lista de entradas (archivos y
directorios) en una ruta específica. Este método retorna un objeto DirectoryReader
que contiene el método readEntries() para leer las entradas obtenidas.
MANEJANDO ARCHIVOS
Existen algunos métodos que son útiles para realizar operaciones comunes sobre archivos y
directorios. Usando estos métodos podremos mover, copiar y eliminar entradas exactamente
como en cualquier aplicación de escritorio.

MOVIENDO
moveTo(directorio, nombre, función éxito, función error) Mueve una entrada a una
ubicación diferente en el Sistema de Archivos. Si el atributo nombre es provisto, el
nombre de la entrada será cambiado a este valor.

COPIANDO
copyTo(directorio, nombre, función éxito, función error) Genera una copia de una
entrada en otra ubicación dentro del Sistema de Archivos.

ELIMINANDO
remove() Elimina un archivo o un directorio vacío (para eliminar un directorio con
contenido, debemos usar el método removeRecursively() presentado anteriormente).
CONTENIDO DE ARCHIVOS
API File
API File: Writer. Esta extensión declara nuevas interfaces para escribir y agregar contenido a archivos.
Trabaja con el resto de la API combinando métodos y compartiendo objetos para lograr su objetivo.

ESCRIBIENDO CONTENIDO
Para escribir contenido dentro de un archivo necesitamos crear un objeto FileWriter.
Estos objetos son retornados por el método createWriter() de la interface FileEntry.

AGREGANDO CONTENIDO
Para seleccionar una posición específica o agregar contenido al final de un archivo ya existente,
es necesario usar previamente el método seek().

LEYENDO CONTENIDO
El proceso de lectura usa técnicas de la parte principal de API File, vamos a usar el
constructor FileReader() y métodos de lectura como readAsText() para obtener el
contenido del archivo.
Conclusión
IndexedDB
Es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones
con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden
funcionar tanto en línea como fuera de línea.

API File
provee información acerca de los archivos y permite que el código JavaScript en una página web tenga acceso
a su contenido.
Un objeto File es una especie específica de Blob, y puede ser utilizada en cualquier contexto que un Blob
puede ser usado. En particular, FileReader, URL.createObjectURL(), createImageBitmap() (en-US), y
XMLHttpRequest.send() aceptan tanto Blobs y Files.