Repaso a las tecnologías de almacenamiento en el navegador

 browsers-save
browsers-save

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

http://www.w3schools.com/html/html5_app_cache.asp

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

Navegadores sessionStorage localStorage FileAPI Application Cache (AppCache) Indexed Db
Internet Explorer 11 4864 k 4864 k No limitado 500MB/ Unlimited (Preguntando al usuario) 250 MB(configurable hasta 1gb por el usuario)
Google Chrome 44 5101 k 5101 k No limitado Unlimited *1 *2 300 Mb (Al menos)
Microsoft Edge 1.0 4864 k 4864 k No limitado 500MB/ Unlimited (Preguntando al usuario) 250 MB(configurable hasta 1gb por el usuario)
Firefox 40 5120 k 5120 k No limitado 250MB ‘3 Sin 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ística Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
Application cache 4.0 3.5 10.0 10.6 4.0
IndexedDb 23 10 IE10 15 7.1
FileApi 31 31 10 25 7.1

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 !

Deja un comentario