HTML5 Web Storage Part 1 - Session Storage

Introduction

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.

Web Storage Events

Types of Web Storage

1. Session Storage
2. Local Storage

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.
   1. for (var i = 0; i < sessionStorage.length; i++)
   2. {
   3. var key = sessionStorage.key(i);
   4. var value = sessionStorage.getItem(key);
   5. }

Summary