In this post I will explain the different storage technologies, in HTML5 browsers, in order to generate a web application capable of working offline with the standard technologies available for it.
sessionStorage#
It is an object that stores information in the current tab in the current domain. But it survives when the page refreshes or when the tab is restored. A new tab window will create a new SessionStorage.
// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde sessionStorage
var data = sessionStorage.getItem('key');localStorage#
Provides access to long-term storage per domain.
// Almacena la información en localStorage
localStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde localStorage
var data = localStorage.getItem('key');Application cache (AppCache)#
It is a mechanism for caching web applications to be able to work offline with them. By means of a manifest file we can specify which resources will be available offline. It also reduces the load on the server and speeds up browsing.
References#
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 is an API for client-side storage of a significant amount of structured data. Greater than sessionStorage, LocalStorage, or globalStorage
Conclusion#
It’s the right technology for massive amounts of data
Learn more#
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
File API#
It allows us to work with a file structure, save them and read them on the disk itself. It can be useful for circumstances such as if we want to simulate the upload of a file in our app while offline, we can save it to disk and synchronize it later, but for the loading of the page, as we know, disk writes have a high cost, which we must try to avoid.
In both IE and Chrome it requires user permission to be used. The storage limit is on free disk space.
More information and examples#
http://www.html5rocks.com/es/tutorials/file/filesystem/
STORAGE AVAILABLE#
BrowserssessionStoragelocalStorageFileAPIApplication Cache (AppCache)Indexed DbInternet Explorer 114864 k4864 kNot limited500MB/ Unlimited (Asking the user)250 MB(configurable up to 1gb per user)Google Chrome 445101 k5101 kNot limitedUnlimited *1300 Mb (At least)Microsoft Edge 1.04864 k4864 kNot limited500MB/ Unlimited (Asking the user)250 MB(configurable up to 1gb by the user)Firefox 405120 k5120 kNot limited250MB ‘3No limit (user permission) blobs >50Mb)The units are the number of characters (bytes) Test used locally and sessionStorage: http://dev-test.nemikor.com/web-storage/support-test/
Browser compatibility#
FeatureChromeFirefox (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
In this case we have focused on desktop browsers, but on the websites above we could obtain information about mobile browsers
Examples#
Here we can see some examples of these technologies together
Learn more#
No Standards / deprecadas (Not recommended)#
globalStorage#
This is a global object that maintains multiple private storage areas that can be used to store data for a long period of time.
webSQL#
It is a similar technology to IndexedDB but was deprecated on November 18, 2010 http://www.w3.org/TR/webdatabase/
userDataBehavior#
It allowed very limited storage, is compatible only with IE and is deprecated from IE10
Until next time !
