Implementing Application Cache and sessionStorage

sessionStorage

The sessionStorage object is used to store the data for only one session. This implies that data is deleted once the user closes the browser. The data stored by using sessionStorage is confined to the browser for which it was created. Consider an example where you need to count the number of time a user has clicked a button in the current session. For this you can use the sessionStorage object, as shown in the following code snippet:

<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<SCRIPT>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("btn").innerHTML=" Your browser does not support Web Storage";
}
}
</SCRIPT>
</HEAD>
<BODY>
<P>BUTTON  onclick="clickCounter()" type="button">Click Here</BUTTON>
</P>
<DIV ID="btn"</DIV>
<P> Click the button to see the increase in counter</P>
<P>Close the browser and try again, the counter will be reset</P>
</BODY>

The preceding code snippet creates the clickCounter() function that is called when the button is clicked. 

Inside the function body , the typeof ()method first checks whether the browser support the Web storage or not.  If it does the clickCount key is used with the sessionStorage object to store the count or number of times the user has clicked the button during the current session . The value of the key, clickCount is increased by one every time the user clicks the button. Since the value assigned to the key of the sessionStorage object is always a string, it is converted into a number before incrementing by one  by using the Number() method. 

Implementing Application Cache

While browsing a website, you must have faced a situation when the network connection is lost and you click the Back Button in the browser to preview the previous page. However, you are not able to view that page as you are not connected to the Internet, and the browser did not cache the page properly. To view the previous page in such a situation , you need to reconnect to the Internet. To address such issue , while developing a Website you can specifies the files the browser should cache so that even if you refresh the page when you are offline , you are able to view the page.

The Application Cache provides the following advantages:

  • Offline Browsing: Specifies that a website can be viewed even if the user is not connected to the Internet.
  • Speed: Specifies that if the user requests the Web page , which is already there in the cache , it is retrieved from the cache and not from the server. Therefore, the loading of the Web Page is faster as the network is not accessed as the connection to the server is not needed. 
  • Reduced Server Load: Specifies that the Web page, if cached , is always be made available from the cache unless the browser detects that the cache manifest has been updated on the server or the user has cleared the browser cache. Then, the browser downloads the new version of the manifest and the resources listed in the manifest.
To Implement Application Cache , you need to create a text file called manifest. The file contains a list of resources that need to be cache for use when there is no network connectivity.
The manifest file also contains the lists of files or pages that should never be cached.

The manifest file is divided into following sections :
  • Cache: Lists the files that need to be cached after they are downloaded for the first time.
  • Network: Lists the file that should never be cached.
  • Fallback: Specifies the task to be performed when the user tries to fetch the uncached files .

About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment