DanteCervantes.com

Angular.js & WebSQL / LocalStorage / IndexDB

Publicado por : Dante | 5 junio, 2015 | 5:46 am

 

64 english

A medida que nuestros conocimientos avanzan también lo hace la necesidad de implementar nuevas herramientas, por eso hoy hablaremos sobre el almacenamiento persistente con Angular.js.

Almacenamiento Persistente

Es aquella información que prevalece aún después de haber cerrado el navegador, tal es el caso de WebSql, LocalStorage, e IndexedDB

LocalStorage

WebSQL 

Proporciona todas las funciones de una base de datos SQL estructurada.

IndexedDB

Se encuentra a la mitad entre LocalStorage y WebSQL, al igual que LocalStorage, su asignación es clave => valor, solo que permite hacer uso de índices similares de las bases de datos relacionales.

LocalForage

Es exactamente igual a LocalStorage, con la única diferencia de que éste utiliza promesas, esto quiere decir que cada vez que se realice una consulta, LocalForage devolverá una respuesta, con el estado success ó error.

Instalación

Sigue las instrucciones de este enlace LocalForage

A partir de ahora, podemos comenzar a hacer uso de la palabra reservada localforage, desde código o consola de desarrolladores.

Configuración

Los drivers soportados por localforage son:

  • localforage.INDEXEDDB
  • localforage.WEBSQL
  • localforage.LOCALSTORAGE

Ejemplos

Módulo de Angular

Ahora que conocemos, el potencial de localforage, que tal si ¿lo conectamos con Angular.js?.

angular-Localforage

Es un módulo creado por el usuario ocombe para Angular.js, en el cual podrémos utilizar todo el potencial de localforage y al velocidad de Angular.js.

Instalación

1 .- Descargar módulo de angular

2 .- Añadir localforage y angular-localForage a nuestro index.html

3.- Añadir como dependencia de angular

4 .- Configurar el driver de la base de datos, todos los parámetros de la configuración, son iguales para todos los drivers.

5 .- Para utilizar este módulo debes inyectar la dependencia “$localForage” y utilizar la misma sentencia que en localforage.

Sigue este enlace para la documentación completa de angular-localforage y este para localforage.

Conclusión

Siempre es bueno poder contar con distintas alternativas al almacenamiento persistente, y en este caso localForage puede ayudar a más de uno.

 

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales