logo

Consejo rápido:haga de IndexedDB una brisa con LocalForage

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

Aunque probablemente sea la mejor solución para el almacenamiento del lado del cliente, IndexedDB tiene un defecto crítico:es una API de bajo nivel. Cosas como transacciones, cursores y la falta de soporte para promesas complican demasiado a IndexedDB y hacen que trabajar con ellos sea agotador.

¡Afortunadamente, hay una manera más amigable para los desarrolladores!

Forraje local al rescate

LocalForage es una biblioteca JavaScript de código abierto que hace que trabajar con bases de datos en el navegador sea mucho más agradable. En el exterior, su API se parece mucho a localStorage, mientras que bajo el capó oculta todo el arsenal de características de IndexedDB.

En comparación con las 15 líneas de código requeridas para hacer cualquier cosa con IndexedDB, con localForage crear una base de datos y acceder a sus entradas se reduce a usar un método simple. También agrega soporte muy necesario para promesas además de otras utilidades útiles.

Instalación

Agregar localForage a un proyecto es bastante simple. O suéltelo directamente en el HTML:

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

O instálelo usando un administrador de paquetes de su elección:

npm install localForage --save

La biblioteca es compatible con navegadores y se puede usar con paquetes como Webpack. La interfaz localForage no requiere ninguna inicialización o carga adicional, por lo que podemos usarla tan pronto como esté disponible.

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

Escribiendo a la Tienda

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

  • clave:identificador único que distingue entre mayúsculas y minúsculas que se usará siempre que queramos acceder a ese elemento más adelante. Usando setItem de nuevo en la misma tecla la sobrescribirá.
  • valor - Los datos que queremos almacenar. Puede ser cualquier cadena, número, objeto, matriz o archivo blob válido.

El proceso es asincrónico, por lo que si queremos hacer algo más con los datos y manejar los errores, debemos usar una promesa o una devolución de llamada.

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);
});

Lectura de la tienda

La obtención de elementos de la base de datos funciona prácticamente de la misma manera. Simplemente usamos getItem , pase el nombre de la clave y use una promesa para trabajar con los datos.

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

Si intentamos obtener una clave que no existe, la promesa se resolverá con éxito, pero el valor interno será null .

Otros métodos

LocalForage tiene otros métodos útiles para trabajar con la base de datos. Todos son tan fáciles de usar como setItem y getItem , también apoyando promesas o devoluciones de llamada.

  • removeItem(key) - Elimina el par clave/valor de la tienda.
  • keys() - Devuelve una matriz de todos los nombres de las claves (solo los nombres).
  • iterate(callback) - Funciona como forEach, esperando una función de devolución de llamada y revisando todos los pares clave/valor.
  • length() - Devuelve el número de artículos en la tienda.
  • clear() - Elimina la tienda.

Bases de datos múltiples

Hasta ahora, los ejemplos de este artículo usaban el localforage interfaz que da como resultado directamente una única tienda global. Si necesitamos más de una tienda, podemos crear tantas instancias como queramos usando createInstance :

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

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

Cada tienda es completamente independiente y solo tiene acceso 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
});

Conclusión

Si está buscando una forma sencilla de administrar las bases de datos del lado del cliente, localForage es una de las mejores herramientas disponibles en este momento. Su API proporciona todas las utilidades necesarias, brindándole suficiente libertad para organizar su almacenamiento como mejor le parezca.

  • Los documentos oficiales:la documentación del proyecto no es muy detallada, pero cubre la mayor parte de lo que necesita saber.
  • localForage en GitHub:el repositorio está muy activo, si tiene algún problema con la biblioteca asegúrese de consultar los problemas aquí primero.
  • angular-localForage - Complemento para trabajar con localForage en Angular.