SessionStorage & LocalStorage : What & How of WebStorage



Browsers these days are becoming more & more intelligent. Gone are the days when the only way to transfer your information to another webpage was query-strings or cookie but with the introduction of HTML5 compliance we are available with two new options of Webstorage named as localStorage & sessionStorage. Get your diving suit on and lets go deep.




What Is Local/Session Storage?

The browser these days gives the developer liberty to store information onto the client's machine to be used or retrieved later in other webpages of the website. This information is saved for specific browser and can only be used within the same browser that saved it. 

The good thing about this is that the value is never passed to server and retrieval of values is very easy as it is stored in key/value pairs. All latest browser supports it including the Mighty Internet Explorer.

Difference Between localStorage & sessionStorage

The only difference between the two is that information saved in the localStorage stays in the memory of browser until you delete it manually by code or by clearing browser's cache. But in case of sessionStorage the information is kept only for your session. sessionStorage information will be accessible only for the specific tab in which is was set and will be deleted once you close the tab.

How To Use Local/Session Storage?

For using it you need to be familiar with JavaScript and I am sure if you are reading this you are familiar with it. First we need to check whether the WebStorage is supported in the browser or not. I earlier said that it is supported in all latest browsers but its safe to keep a check. See the below code for check


if(typeof(Storage) !== "undefined") {
    // Put you code for localStorage/sessionStorage here.
} else {
    // This means no WebStorage support
}

Lets have a look on how to set the value of localStorage. Basically it can be set in three different ways and any one can be used as per your wish. Shown below is an example to save UserID of a user in localStorage

if(typeof(Storage) !== "undefined") {
    // 1:
    // localStorage.setItem('UserID','john.miller');
    // 2:
    // localStorage['UserID'] = 'john.miller';
    // 3:
    // localStorage.UserID = 'john.miller';
} else {
    // This means no WebStorage support
}

The syntax of sessionStorage is same as for the localStorage. The value is stored and retrieved as strings. Retrieval of the values is very easy and its shown below


if(typeof(Storage) !== "undefined") {
    // 1:
    // localStorage.getItem('UserID'); returns john.miller
    // 2:
    // localStorage['UserID']; returns john.miller
    // 3:
    // localStorage.UserID = 'john.miller'; returns john.miller
} else {
    // This means no WebStorage support
}

Now as mentioned above that the values are stored as strings  make sure if you save an integer value to WebStorage, then you need to convert the retrieved value back to integer.

WebStorage size limit varies from browser to browser but normally it can store data up-to 5MB which is quite sufficient.


We have a video for this on our youtube channel, have a look:




So this is all about WebStorage in HTML5. You can add on things that we might have missed or ask questions or any suggestions that you have in mind.

Happy Reading!! 

Comments

Popular posts from this blog

Create Android Apps - Getting Started

Polymorphism in Kotlin With Example