HTML5 Web Storage Part 1 - Session Storage

In many web applications we want to store data on client side. Before HTML5 we use cookies for this. There are some limitations of cookies as in the following:

Limitations of Cookies

1. The storage limit of cookies in web browsers is limited to about 4KB.
2. Cookies are sent with every HTTP request, thereby slowing down the web application performance.

To overcome these problems Web Storage API introduced.

Introduction to HTML 5 Web Storage



HTML5 Web Storage

HTML Web Storage is originally part of HTML5 specifications, but now found in its own dedicated space. Web Storage provides the way to store data and access data at client side. It stores data in the form of KEY/VALUE pair. Any data stored in Web Storage is tied to the document origin. All pages from one origin can store and access same data. The data stored in storage can be accessed using JavaScript.

Advantages of HTML5 Web Storage:

1. It can store 5 to 10 MB data. That is far more than cookies.
2. Web storage data never transferred with HTTP request, so it increases the performance of application.

Supported Browsers

Web Storage Events

When we store data in Web Store, the storage event is fired. This helps to synchronize data when web page opened in multiple tabs of same browser. When data is changed in one tab then storage event fired in other tabs.


The storage is only fired when the new value is different than old value. The storage event contains the key, old value, and new value.

Types of Web Storage

There are two types of Web Storage,

1. Session Storage
2. Local Storage

In this article we will see how to use Session Storage.

Session Storage

As its name implies that it store data of current session only that means the data stored in session storage are cleared when browser closed. To access session storage in JavaScript the following methods are available.

1. To store data in session storage setItem () function is used.
   
   sessionStorage.setItem (‘key’,’value’);
   
   Ex: sessionStorage.setItem (‘username’,’ABC’);
   
   We can only store strings in session storage. To save objects in session first convert object into JSON string and then store this string in session storage as in the following,
   
   sessionStorage.setItem (‘object’, JSON.stringify(object));
   
   
2. To retrieve data from session storage getItem() function is used.
   
   sessionStorage.getItem(‘key’);
   
   Ex: var username= sessionStorage.getItem(‘username’);
   
   If JSON string is stored in session storage, then you can convert it into object as below.
   
   var object=JSON.parse(sessionStorage.getItem(‘object’));
   
   
3. To delete particular key from session storage removeItem function is used.
   
   sessionStorage.removeItem(‘key’);
   
   Ex: sessionStorage.removeItem(‘username’);
   
   
4. To delete all keys from session storage clear function is used,
   
   sessionStorage.clear();
   
   To get all KEY/VALUE pairs from session storage, you can loop through session storage like the following.
   

   for (var i = 0; i < sessionStorage.length; i++)
   {
       var key = sessionStorage.key(i);
       var value = sessionStorage.getItem(key);
   }