Articles from Jinal Desai .NETAPIs in HTML52012-12-29 19:12:54 Jinal DesaiStorage APIs in HTML5Storage APIs are HTML5 answ...
function.if(isLocalStorageAvailable) {   window.localStorage.removeItem("Name");}Session StorageThe window.sessionStorage ...
//Manifest file ends here.To know cache status use following code.var applicationCache = window.applicationCache;applicati...
Upcoming SlideShare
Loading in …5

APIs in HTML5 at Jinal Desai .NET


Published on

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 it's length, number of cookies per website and many more.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

APIs in HTML5 at Jinal Desai .NET

  1. 1. Articles from Jinal Desai .NETAPIs in HTML52012-12-29 19:12:54 Jinal DesaiStorage APIs in HTML5Storage APIs are HTML5 answers to browser cookies limitations. These APIs allowsdevelopers to store some basic information and values that can be user specificand tame cookies limitations like it’s length, number of cookies per website andmany more. Typical examples of such information are saving game state, savingnavigation locations, etc. The size restriction of storing data using Storage APIs isaround 5MB. This limit is suggested by W3C, but the specs provide some room forimplementation details. So actual size depends on browser, but it does not fluctuatethat much.Local StorageIt is basic implementation of storing data locally on user’s machine. It is a key/valuepair collection. It is window.localStorage. It allows application to run offline with somedata stored on user’s machine like user’s name and preferences.You can use localStorage object without window. Like you can use it directly aslocalStorage instead of window.localStorage. However, it is better code practice touse window.localStorage.To check browser is supporting window.localStorage or not you can use followingfunction.function isLocalStorageAvailable() { try { return localStorage in window && window[localStorage]!==null; } catch(err) { return false; }}Storing value in localStorage is very easy with it’s 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 clearfunction.if(isLocalStorageAvailable) { window.localStorage.clear();}To remove only particular item from localStorage you can use it’s removeItem
  2. 2. function.if(isLocalStorageAvailable) { window.localStorage.removeItem("Name");}Session StorageThe window.sessionStorage stores information for a single session only. Theinformation is lost when the user ends the session. All the functionality is same aswindow.localStorage you just need to replace sessionStorage instead oflocalStorage in all above examples.Difference between Local Storage and Session StorageThe main difference is that localStorage persists information over different tabs orwindows, even if we close the browser according to the domain’s security policyuser’s choice about quota limit.While with sessionStorage when HTML document is created, the user agent mustsee to check if document’s top level browsing context has allocated a sessionstorage area for that document’s origin. If it has not, a new storage area for thatdocument’s origin must be created. So each document object has separate objectfor it’s windows sessionStorage attribute. In summary, the sessionStorage objectdoes not persists if we close the tab/window or it does not exists if we access thestored value via different tab/window.AppCache API in HTNL5In some scenarios storing user’s information in bits and pieces is not enough. Youneed to store much more data so that entire application can work offline. HTML5 hasprovided caching functionality so that you can cache entire file/files. So when user isoffline browser can access cached resources.Cached resources are local thus it loads faster, it reduces server load and alsosupports browsing without internet connection. AppCache API is maintainingmanifest file(.mf) for keeping track of cached pages. To enable cache, includemanifest attribute on documents html tag.<html manifest="">...</html>Once you include manifest attribute on html document, it will automatically cacheentire html page.Following is example of typical manifest file. The paths of all the files caches arerelative.//Manifest file start here.CACHE MANIFEST //Every manifest file starts with CACHE MANIFESTNETWORK: //Network files are never cached.share_Prices.phpFALLBACK: //Files that wasn’t cached or wasn’t save correctly//and need to give message to user.message_Offline.htmlCACHE: //Actual cached resource.index.htmlstyle.cssimages/logo.png
  3. 3. //Manifest file ends here.To know cache status use following code.var applicationCache = window.applicationCache;applicationCache.status === applicationCache.UNCACHEDapplicationCache.status === applicationCache.IDLEapplicationCache.status === applicationCache.CHECKINGapplicationCache.status === applicationCache.DOWNLOADINGapplicationCache.status === applicationCache.UPDATEREADYapplicationCache.status === applicationCache.OBSOLETETo update cache.var applicationCache = window.applicationCache;applicationCache.update(); //Update users cacheif(applicationCache.status == window.applicationCache.UPDATEREADY) { applicationCache.swapCache(); //swap updated users cache with old stored cache}Events in AppCache APIapplicationCache.addEventListener(cached, handleCacheEvent, false);//first time cacheapplicationCache.addEventListener(checking, handleCacheEvent, false);//checking for updateapplicationCache.addEventListener(downloading, handleCacheEvent, false);//update is available and browser is downloading updateapplicationCache.addEventListener(error, handleCacheError, false);//404 or 410, downloading failed or manifest changed//when download in progressapplicationCache.addEventListener(noupdate, handleCacheEvent, false);//first downloadapplicationCache.addEventListener(obsolete, handleCacheEvent, false);//4040 or 410, cache being deletedapplicationCache.addEventListener(progress, handleCacheEvent, false);//cache being fetchedapplicationCache.addEventListener(updateready, handleCacheEvent, false);//when manifest newly downloadedConclusionAs browser and user experiences is eveolving, HTML5 has evolved to storeinformation locally at user’s machine. You can use localStorage or sessionStorageto store name/value pairs of user/application specific values or you can cachemultipages to let your user work offline.