After going through the previous chapter you may have familiar with Video Dom, which can be used for customization in video playing.

HTML5 Web Storage

HTML5 Web Storage: What is it?

The HTML5 Web Storage is a process, which stores the data locally on the user's browser.

Before the development of HTML5, Web Storage was done with Cookies. The Web Storage is more secure and faster than the Cookies. The data of Web Storage is not included with every server request, but it is used ONLY when asked for.

This can be also used for storing large amounts of user's data on the browser, without affecting the website's performance.

HTML5 Web Storage: How it Works?

The whole process is done within the browser, so there is no need to send data to the server. It stores the data in name/value pairs, and the data of web page are only accessible, which is stored by it.

The storage limit is far larger (at least 5MB) rather than Cookies and information is never transferred to the server, so it is much faster in terms of website performance and loading.

By all means we can say that HTML5 Web Storage is better than Cookies.

HTML5 Web Storage: Browser Support

All the major browsers support HTML5 Web Storage (Internet Explorer 8+, Firefox, Opera, Chrome and Safari), but be sure before playing with it on Internet Explorer 7 and lower version of this browser. As yet this feature is not supported by the Internet Explorer 7 and its earlier version.

Supported Browser

HTML5 Web Storage: How to Check Browser Support?

As declared earlier, there is a list of browsers support HTML5 Web Storage, but still a few browsers, especially the lower version of browser doesn't support this feature of HTML5. So before going to use the HTML5 Web Storage, please check whether your browser supports HTML5 Web Storage or not.

Here is a set of script that can be used to check the browser, whether it supports Web Storage or not.

if(typeof(Storage)!=="undefined")
  {
  // Code for localStorage/sessionStorage.
  }
else
  {
  // Sorry! No Web Storage support.
  }

HTML5 Web Storage: Objects

As HTML5 Web Storage stores the data on Object basis, so the two categories have been defined to store the data. In other words, it provides two new Objects to store the data on the user's computer.

1. Local Storage (stores the data with no expiration date)

2. Session Storage (stores the data for a particular session, will lose the data when close the browser or tab)

The Local Storage Object

As described earlier the Local Storage Object stores the data with no expiration. In other words, we can say that the data will not be cleared, deleted or misplaced even when we close the browser. It will remain appear whenever we open our browser next time. It doesn't mean the time duration, either it can be the next day or next year, but the stored data will be remaining on the browser.

Here is the example script, which can be used for storing the data as Local Storage Object.

if (localStorage.clickcount)
  {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
  }
else
  {
  localStorage.clickcount = 1;
  }
document.getElementById("result").innerHTML="You have clicked the button " +
localStorage.clickcount + " time(s).";

Local Storage Example: Explanation

In the above demonstrated example, we have tried the make a button clicking event and stored the each button click with Local Storage Object. The demonstrated example works on a conditional process, where the user clicks the button and the hit is counted. As the browser knows you have hit the button, it will increment +1 in the result.

The process can continue until you don't destroy remove the Local Storage Object. When you close the browser the session will not be expired and you continue your click count after the previous results.

Conclusion: This script will print and increment the number of times, you click the button.

Local Storage Object: How to remove stored data?

Sometimes we may need to delete or remove the declared Local Storage Object for as per our requirement of script writing. Below is the syntax which can be used to remove the declared Local Storage Object.

Here is the script for removing the Local Storage items:

localStorage.removeItem("name, which had been declared");

The Session Storage Object

As described earlier the Session Storage Object stores the data for a specific session. Whenever a user closes the browser, the stored data will be no longer available. This is the smallest and the only difference between Local Storage Object and Session Storage Object.

Here is the example script, which can be used to store the data as Session Storage Object.

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
  }
else
  {
  sessionStorage.clickcount = 1;
  }
document.getElementById("result").innerHTML="You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

Session Storage Example: Explanation

In the above demonstrated example, we have tried the make a button clicking event and stored the each button click with Session Storage Object. The demonstrated example works on a conditional process, where the user clicks the button and the hit is counted. As the browser knows you have hit the button, it will increment +1 in the result.

The process can continue till you don't close the browser. When you close the browser the session will be expired and you will not longer be able to see the previous results. You will have to start again from initial.

Conclusion: This script will print and increment the number of times, you click the button.

Session Storage Object: How to remove stored data?

However the Session Storage works for a specific session, and you won't be in need of removing the stored object, but beyond the ashes if would like to know the removing stored data with Session Storage, you can find a syntax here. This as similar as removing of Local Storage data, only the syntax is changed.

sessionStorage.removeItem("name, which had been declared");