APIs in HTML5 at Jinal Desai

Articles from Jinal Desai .
NET
APIs in HTML5
2012-12-29 19:12:54 Jinal Desai
Storage APIs in HTML5 Storage APIs are HTML5 answers to browser cookies limitations. These APIs allows developers to store some basic information and values that can be user specific and tame cookies limitations like its length, number of cookies per website and many more. Typical examples of such information are saving game state, saving navigation locations, etc. The size restriction of storing data using Storage APIs is around 5MB. This limit is suggested by W3C, but the specs provide some room for implementation details. So actual size depends on browser, but it does not fluctuate that much. Local Storage It is basic implementation of storing data locally on users machine. It is a key/value pair collection. It is window.localStorage. It allows application to run offline with some data stored on users machine like users name and preferences. You can use localStorage object without window. Like you can use it directly as localStorage instead of window.localStorage. However, it is better code practice to use window.localStorage. To check browser is supporting window.localStorage or not you can use following function. function isLocalStorageAvailable() { try { return 'localStorage' in window && window['localStorage']!==null; } catch(err) { return false; } } Storing value in localStorage is very easy with its setItem function. if(isLocalStorageAvailable) { window.localStorage.setItem("Name","Jinal Desai"); } To get it back use getItem function of localStorage. if(isLocalStorageAvailable) { var Name = window.localStorage.getItem("Name"); } How to clear it? To clear all the data stored in the localStorage API use clear function. if(isLocalStorageAvailable) { window.localStorage.clear(); } To remove only particular item from localStorage you can use its removeItem
function. if(isLocalStorageAvailable) { window.localStorage.removeItem("Name"); } Session Storage The window.sessionStorage stores information for a single session only. The information is lost when the user ends the session. All the functionality is same as window.localStorage you just need to replace sessionStorage instead of localStorage in all above examples. Difference between Local Storage and Session Storage The main difference is that localStorage persists information over different tabs or windows, even if we close the browser according to the domains security policy users choice about quota limit. While with sessionStorage when HTML document is created, the user agent must see to check if documents top level browsing context has allocated a session storage area for that documents origin. If it has not, a new storage area for that documents origin must be created. So each document object has separate object for its windows sessionStorage attribute. In summary, the sessionStorage object does not persists if we close the tab/window or it does not exists if we access the stored value via different tab/window. AppCache API in HTNL5 In some scenarios storing users information in bits and pieces is not enough. You need to store much more data so that entire application can work offline. HTML5 has provided caching functionality so that you can cache entire file/files. So when user is offline browser can access cached resources. Cached resources are local thus it loads faster, it reduces server load and also supports browsing without internet connection. AppCache API is maintaining manifest file(.mf) for keeping track of cached pages. To enable cache, include manifest attribute on documents html tag. <html manifest="http://jinaldesai.net/manifest.mf"> ... </html> Once you include manifest attribute on html document, it will automatically cache entire html page. Following is example of typical manifest file. The paths of all the files caches are relative. //Manifest file start here. CACHE MANIFEST //Every manifest file starts with CACHE MANIFEST NETWORK: //Network files are never cached. share_Prices.php FALLBACK: //Files that wasnt cached or wasnt save correctly //and need to give message to user. message_Offline.html CACHE: //Actual cached resource. index.html style.css images/logo.png
//Manifest file ends here. To know cache status use following code. var applicationCache = window.applicationCache; applicationCache.status === applicationCache.UNCACHED applicationCache.status === applicationCache.IDLE applicationCache.status === applicationCache.CHECKING applicationCache.status === applicationCache.DOWNLOADING applicationCache.status === applicationCache.UPDATEREADY applicationCache.status === applicationCache.OBSOLETE To update cache. var applicationCache = window.applicationCache; applicationCache.update(); //Update user's cache if(applicationCache.status == window.applicationCache.UPDATEREADY) { applicationCache.swapCache(); //swap updated user's cache with old stored cache } Events in AppCache API applicationCache.addEventListener('cached', handleCacheEvent, false); //first time cache applicationCache.addEventListener('checking', handleCacheEvent, false); //checking for update applicationCache.addEventListener('downloading', handleCacheEvent, false); //update is available and browser is downloading update applicationCache.addEventListener('error', handleCacheError, false); //404 or 410, downloading failed or manifest changed //when download in progress applicationCache.addEventListener('noupdate', handleCacheEvent, false); //first download applicationCache.addEventListener('obsolete', handleCacheEvent, false); //4040 or 410, cache being deleted applicationCache.addEventListener('progress', handleCacheEvent, false); //cache being fetched applicationCache.addEventListener('updateready', handleCacheEvent, false); //when manifest newly downloaded Conclusion As browser and user experiences is eveolving, HTML5 has evolved to store information locally at users machine. You can use localStorage or sessionStorage to store name/value pairs of user/application specific values or you can cache multipages to let your user work offline.

APIs in HTML5 at Jinal Desai

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

APIs in HTML5 at Jinal Desai

Încărcat de

Drepturi de autor:

Formate disponibile

Articles from Jinal Desai .

S-ar putea să vă placă și