HTML5 Web Storage Part 1 - Session Storage

Introduction 

 

In many web applications, we want to store data on the 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 the client-side. It stores data in the form of a KEY/VALUE pair. Any data stored in Web Storage is tied to the document origin. All pages from one origin can store and access the 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 an HTTP request, so it increases the performance of the application.

Supported Browsers

 

 

Web Storage Events

 

When we store data in the Web Store, the storage event is fired. This helps to synchronize data when a web page opened in multiple tabs of the 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 the 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 stores data of the current session only which means the data stored in session storage are cleared when the 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 an object into a 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 the 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 the object as below.
    
   var object=JSON.parse(sessionStorage.getItem(‘object’));
    
3. To delete a 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);
   }

Summary

 

In this article, we learned about HTML5 Web Storage Part 1 - Session Storage.