February 3, 2018

Session Storage - a client-side state management technique

In web application development, storing values in client side has limited options and those have their own limitations. For example, it can be hard to store data manipulated using web scripting languages as jQuery, JavaScript etc. Most of the time user prefer to store such data in session variable, to avoid overhead calculation of data or reading it again from repository.

HTML5 has introduced additional client-side state management variable called “session storage”. This is supportable to the browser which does support HTML5, as IE 8/above, Firefox 3/above, Safari 4/above etc. Session storage can store string type of variable in client side in simple and easy steps. Reading and writing in to session storage is quite simple. An example is shown below, please note the code is written using jQuery.

Set a value in session storage:
sessionStorage.setItem("name", “Navin Pandit”);

Read a value from session storage:


Store an object data

To store an object data in session storage, you need to convert it in to string type. An simple example given below, shows to store an object data.

var obj = {“name”:”Navin Pandit”, “country”: “India”, “url”:”navinpandit.blogspot.in”};
sessionStorage.setItem("myObj", JSON.stringify(obj));

var obj = JSON.parse(sessionStorage.getItem("myObj"));