Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 Web Storage

HTML5 provides two mechanism for client storage and overcome the drawbacks of HTTP cookie as illustrated below.

  • Cookies are included in every HTTP request, thereby impacting your web application performance by transmitting the same data.
  • Cookies sends unecrypted data over HTTP request.
  • Cookies has a limitation of 4 KB data and thus restricting amount of data that can be stored.

There are two storages - session storage and local storage and can be used to handle different situations.

The latest versions of every browser including IE supports it.

Session Storage:

The Session Storage is designed for scenarios where user would be carrying out transactions in multiple windows.

Example:

For example, if a user is buying plane tickets using two different windows, for the same site. If he is using cookies it would land him buying two tickets.

HTML5 introduces the sessionStorage attribute which can be used by sites to add data to session storage and it would remove it once window is closed and it won't be shared across multiple windows.

Below code will set a session variable and access that variable:


<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Local Storage:

The Local Storage is used for storage that can be used across multiple windows and which persists across session. In particular, Web applications may wish to store megabytes of user data, such as entire user's mailbox or user-authored documents, on the client side to increase performance.

Again, cookies do not handle this case well, as they are transmitted with every request.

Example:

HTML5 introduces the localStorage attribute that can be used to access a page's local storage area with no time limit and this local storage will be available whenever that page is used.

Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:


<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Delete Web Storage:

We shouldn't store sensitive data in local storage

Session Storage Data can be used as it would be deleted by the browsers immediately after the session gets terminated.

In order to clear a local storage setting you would need to use calllocalStorage.remove('key'); where 'key' is the key of the value you want to remove. In order to clear all settings, you need to calllocalStorage.clear() method.

Below is the code which would clear complete local storage:


<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.clear();
// Reset number of hits.
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refreshing the page would not to increase hit counter.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>


Related Videos