HTML5 Session Storage : Key things to consider

Session Storage is a new feature in HTML 5 under Client Storage. Even before the advent of this feature developers were using client side storage before with various techniques. Cookies were the first, foremost and most famous technique which is being used across all the sites(almost). Cookies has its own limitation like increased HTTP call weight, storage size limitation(4 KB). To overcome these, HTML 5 has come up with a feature called Client Storage.

HTML5 supports three types of Client Storage options

1. Session Storage
2. Local Storage
3. Database Storage

Each of the above has its own pros and cons. Considering Browser compatibilities, ease of development and quick ability to adapt in mind, I would recommend Session Storage.

What is Session Storage?

• Session Storage is a simple map constructed with Key value pairs
• It is global object in JavaScript, to be more specific it is a sub-object of window
• The Object perishes once the Window is closed(Window  instance)
• Session Storage can store megabytes of values, the exact size depends on the browser implementation. For IE8 it is 10 MB

How to use Session Storage?

As we understand that session storage is a simple Map, we can direct set and get values in this object as we do with maps. It is a better practice to create an instance of session storage for usage. Here is the snippet

var dataStore = window.sessionStorage;

This will create a dataStore object which would be our session storage object, now the object is ready for use

Setting a value:

dataStore.setItem(‘key’,'value’);

Getting a value:

dataStore.getItem(‘key’);

Removing a value:

dataStore.removeItem(‘key’)

Clearing the entire object:

dataStore.clear();

Getting the Length:

dataStore.length;

KEY and VALUE are pure String literals in this case

Key things to consider during implementation:

1. Always remember that both KEY and VALUE are STRING literals, even if you set TRUE as value, it will be considered as a string, same with 1 or 0
2. As of now only Chrome, Firefox, Safari and IE8 & above supports Session Storage.
3. It is strongly recommended that you escape the value before setting it in the storage, like dataStore.setItem(‘key’,escape(‘value’)) and while fetching the value, unescape the same unescape(dataStore.getItem(‘key’)). This is to handle special characters, esp for IE
4. One more key thing to keep in mind is even though sessionStorage can store upto 10MB, it is always better to handle break over scenarios. If the quota exceeds, the browser will throw the following error ,’Uncaught Error: QUOTA_EXCEEDED_ERR: DOM Exception 22‘.Browsers are expected to handle it themselves, but at this point atleast Chrome doesnt. I created a small wrapper around the set which would add a try/catch and I cleared the object on error, it needn’t be the same in call cases, if you desire a specific handling technique, you can do that in the catch. It goes like this

   try {
   dataStore.setItem(‘key’,escape(‘value’));
   }
   catch(e){
   if(e.code == 22){
   dataStore.clear();
   }
   }

Have fun!