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#
NavegadoressessionStoragelocalStorageFileAPIApplication Cache (AppCache)Indexed DbInternet Explorer 114864 k4864 kNo limitado500MB/ Unlimited (Preguntando al usuario)250 MB(configurable hasta 1gb por el usuario)Google Chrome 445101 k5101 kNo limitadoUnlimited *1300 Mb (Al menos)Microsoft Edge 1.04864 k4864 kNo limitado500MB/ Unlimited (Preguntando al usuario)250 MB(configurable hasta 1gb por el usuario)Firefox 405120 k5120 kNo limitado250MB ‘3Sin limite (permiso al usuario blobs >50Mb)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#
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)localStorage43.5810.504sessionStorage52810.504Application cache4.03.510.010.64.0IndexedDb2310IE10157.1FileApi313110257.1
- 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
Más información#
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 !
