Implementing Offline Support

           Implementing Offline Support

At times, you must have noticed that while you are surfing a website, a message, such as 'Browser could not open the Web page', is displayed. This is because the connection to the Internet is lost. In such a case, you do not have access to the website that you were surfing. However, if you want to have some level of access to the website even if you are not connected to the Internet, you can use the offline support feature. For Example, the executives of ShopHere often need to visit different cities to advertise  their products. They need to  access the organization s website during their promotional tours. However, the website is not accessible every time, especially in the remote areas where the network is not available. In such a case, the offline support feature of HTML can be used to ensure that the website is accessable to the executives even without the Internet connection. In addition, using the offline support feature avoids the normal network requests needed to load a website.

Before the offline support feature of HTML the offline storage-enabled websites were created using plugins and cookies. A cookies is a small piece of data, which is sent from a website and stored in a users browsers while the user browses the website. When the user revisits the same website, the data stored in the cookie is retrieved. Cookies are not  purely used for offline storage as they store a limited amount of data. In addition, cookies slow down the network activity because they are transterred to and from the server.

These limitations are overcome  with the help of the  offline support feature of HTML. The offline support feature providrs the following benefits:

  • . Ensure that the website is available even when the user is not connected to the network.
  • Reduces network load on the server.
You can make your website work offline  by using the following ways:

  • Implementing client - side storage
  • Implementing application cache
Implementing Client-side storage
The client- side storage refers to the process of storing data locally within the users browsers. This is also known as Web storage.The data stored by using clent - side storage is retrieved only when it is requested, and not with every server request. Moreover you can store a large amount of data by implementing the client- side storage, where the data is stored in the form of key/value pairs.

The clent - side storage can be implemented bu using the following objects:
  • localStorage
  • sessionStorage


The localStorage object allows you to store data without any expiration data. This implies that the data stored by using the localStorage object is not deleted after the browsers is closed, and it will be available when thr browser is reopened. The localStorage object stores the data only in the form of string.Using this object, the cache data is accessable across all the browser windows.

Consider the following code snippet for storing the users information by using localStorage:

<Div ID="str"></DIV>
document.getElementById("str").innerHTML=" "+;
document.getElementById("str").innerHTML="browser does not store local storage";

In the preceding code snippet, the type() method first checks whether the browser supports the Web storage or not. If it does, the localStorage object stores the users name locally in the browser by using the key, name, which is assigned the value, John.

Later the information stored in the localStorage object is retrieved by using the key and is assigned to the innerHTML property of the </DIV> tag that has ID, str.

The text Your browser does not support local Storage, is displayed inside the </DIV> tag if the browser does not support the Web storage.

About Codingwelove

Recommended Posts × +


Post a Comment