Cómo mejorar IndexedDB con LocalForage

IndexedDB es una base de datos NoSQL local que permite a los desarrolladores almacenar de forma segura datos en el navegador. Cuenta con un gran soporte multiplataforma, funciona con cualquier tipo de datos y es lo suficientemente potente como para crear aplicaciones que funcionen sin conexión.

Aunque probablemente sea la mejor solución para el almacenamiento del lado del cliente, IndexedDB tiene una falla crítica: es una API de bajo nivel. Cosas como transacciones, cursores y demás, complican IndexedDB y hacen que sea tedioso trabajar con ella.

Por suerte, hay una manera con la que no todo es tan malo...

¡LocalForage al rescate!

LocalForage es una librería de JavaScript open source que hace que trabajar con bases de datos en el navegador sea mucho más sencillo. Su API, a primera vista, se parece mucho a localStorage, pero si te paras a ver lo que esconde, te percatarás de que oculta un gran arsenal de características IndexedDB.

En comparación con las 15 líneas de código necesarias para hacer cualquier cosa con IndexedDB, con localForage crear una base de datos y acceder a tus entradas se reduce a utilizar un simple método. También con soporte para promesas y otras utilidades.

Instalación

Añadir localForage a un proyecto es muy simple. Puedes agregarlo directamente en el HTML.

<script src="assets/js/localforage.min.js"></script>

O instalarlo utilizando un gestor de paquetes:

npm install localForage --save

La librería puede utilizarse con bundlers como Webpack. La interfaz de localForage no requiere inicialización alguna o carga adicional para poder utilizarla tan pronto como esté disponible.

import localforage from "localforage";
localforage.setItem('key', 'value');

Almacenando datos

Dado que no tenemos que configurar o crear nuevas bases de datos, podemos entrar y agregar algunos datos a nuestro almacén. Esto se hace a través del método setItem, tomando dos parámetros clave, valor.

• Clave - Identificador único, sensible a mayúsculas y minúsculas que se utilizará cada vez que desees acceder a este elemento más adelante. Utilizar setItem de nuevo en la misma clave lo sobrescribirá.
• Valor - Los datos que queremos almacenar. Puede ser cualquier cadena válida, número, objeto, array o blob de archivo.

El proceso es asíncrono así que si queremos hacer algo más con los datos y gestionar errores, tendremos que usar una promesa o callback.

var hexColors = {
    red: 'ff0000',
    green: '00ff00',
    yellow: 'ffff00'
};

localforage.setItem('colors', hexColors).then(function (value) {
    console.log(value.red);
}).catch(function(err) {
    console.error(err);
});

Leyendo datos

Recuperar elementos de la base de datos funciona prácticamente de la misma manera. Simplemente usamos getItem, le pasamos el nombre de la clave y usamos una promesa para trabajar con los datos.

localforage.getItem('colors').then(function (value) {
    console.log(value.red); 
}).catch(function(err) {
    console.error(err);
});

Si tratamos de obtener una clave que no existe, la promesa se resolverá con éxito, pero el valor será nulo.

Otros métodos

LocalForage tiene otros métodos muy útiles para trabajar con la base de datos. Son todos tan fáciles de usar como setItem y getItem.

• removeItem (clave): elimina el par clave/valor del almacén.
• keys() - Devuelve un array de todos los nombres de las claves (sólo los nombres).
• iterate(callback) - Funciona como un forEach, espera un callback y revisa todos los pares clave/valor.
• length() - Devuelve el número de elementos del almacén.
• clear() - Limpia el almacén.

Múltiples bases de datos

Hasta ahora los ejemplos en este artículo han utilizado la interfaz localforage resultando directamente en un único almacén global. Si necesitamos más de un almacén podremos crear tantas instancias como quisiéramos usando createInstance:

var dogStore = localforage.createInstance({
  name: "Dogs"
});

var catStore = localforage.createInstance({
  name: "Cats"
});

Cada almacén es completamente independiente y tiene acceso sólo a sus propios datos (las bases de datos NoSQL son en su mayoría no relacionales).

dogStore.setItem('Jake', 'Good boy');
catStore.getItem('Jake').then(function (value) {
    console.log(value);  // Will result in null
});

Fuente: tutorialzine.com