En este post explicaré las diferentes tecnologías de almacenamiento, en browsers HTML5, para poder generar una aplicaciónes web capaces de funcionar offline con las tecnologías standard disponibles para ello.

sessionStorage

Es un objeto que almacena información en la pestaña actual en el dominio actual. Pero pervive al refresco de la página o al restaurar la pestaña. Una nueva pestaña ventana creará un nuevo SessionStorage.

// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde sessionStorage
var data = sessionStorage.getItem('key');

localStorage

Proporciona acceso a almacenamiento a largo plazo por dominio.

// Almacena la información en localStorage
localStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde localStorage
var data = localStorage.getItem('key');

Application cache (AppCache)

Es un mecanismo de cacheo de aplicaciones web para poder trabajar offline con ellas. Mediante un fichero manifest podemos especificar que recursos estarán disponibles offline. Además reduce la carga del servidor y acelera la navegación.

Referencias

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

https://html.spec.whatwg.org/multipage/browsers.html#appcache

Indexed DB

IndexedDB es una API pare almacenamiento en cliente de una cantidad significativa de datos estructurados. Mayor que sessionStorage, LocalStorage o globalStorage

Conclusión

Es la tecnología idónea para ingentes cantidades de datos

Más información

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

File API

Nos permite trabajar con una estructura de ficheros, guardarlos y leerlos en el propio disco. Nos puede servir para circunstancias como si queremos simular la subida de un fichero en nuestra app estando offline, podremos guardarlo en disco y sincronizarlo después, pero para la carga de la página, como sabemos las escrituras en disco tienen un coste elevado, que debemos intentar evitar.

Tanto en IE y Chrome requiere permiso del usuario para ser utilizada. El límite de almacenamiento está en el espacio libre en disco.

Más información y ejemplos

http://www.html5rocks.com/es/tutorials/file/filesystem/

ALMACENAMIENTO DISPONIBLE

La unidades son el número de caracteres (bytes)

Test usado local y sessionStorage: http://dev-test.nemikor.com/web-storage/support-test/

Compatibilidad de los navegadores

• http://caniuse.com/#feat=fileapi
• http://caniuse.com/#feat=localStorage
• http://caniuse.com/#feat=sessionStorage
• http://caniuse.com/#feat=appcache
• http://caniuse.com/#feat=IndexedDb

En este caso nos hemos centrado en browsers de escritorio, pero en las webs de arriba podríamos obtener información sobre mobile browsers

Ejemplos

Aquí podemos ver algunos ejemplos de estas tecnologías unidas

• https://hacks.mozilla.org/2010/01/offline-web-applications/

Más información

• https://developer.mozilla.org/es/docs/DOM/Almacenamiento

No Standards / deprecadas (No recomendadas)

globalStorage

Este es un objeto global que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo.

webSQL

Es una tecnología parecida a IndexedDB pero fue deprecada el 18 de noviembre de 2010 http://www.w3.org/TR/webdatabase/

userDataBehavior

Permitía un almacenamiento muy limitado, es compatible solo con IE y está deprecado desde IE10

Hasta la próxima !

Rubén Infante Docio

Apasionado, geek, ingeniero de locuras y absolutamente convencido de nada