Cookies vs HTML 5 Web Storage – Choose wisely

Cookies are something which everyone in web development must have heard off and would have used although I am bit surprised to know the awareness of HTML5 Web Storage among people.

It wouldn’t be fair to say that it’s a new concept as it’s been a while since Web Storage is around and yesterday post encountering another blank face to Web Storage, I thought of writing and sharing this on my blog. So let’s get on to it.

HTTP Cookies

I am not going to explain much about HTTP Cookies. In short, Cookies are small piece of information sent from web server to web browser and stored on client’s machine in text files.

HTML 5 Web Storage

With web storage, web applications can store data locally within the user's browser. Web Storage comes in two flavors, local storage and session storage (the difference between the 2 will be explained later)

Enlightenment

You must be thinking, looks like both does the same thing and what’s the difference. Well this is where it gets interesting.

There are three major difference between how Cookies and Web storage works.

1. Web storage provides far more storage capacity than cookies. Where cookies are limited to 4 KB, the benchmark capacity for Web Storage is 5 MB and even this limit varies with browsers. Some browsers provide even higher storage.
2. Second and the most significant difference is, Cookies are sent with each HTTP request once they are set but web storage data is not. This can improve the performance of your site.
3. Web Storage is more secure than Cookies as it is designed to operate at domain & protocol level.

Web storage is definitely the future of Cookies and even in HTML 5, you have local storage based Cookies available. Although I personally like Web Storage but it would be unfair with Cookies to not mention the two downsides of Web Storage.

1. Web Storage also been around from a while now but is only supported on browsers supporting HTML 5. Hence if you need to provide support for legacy browsers then this could be an issue for you.
2. Web Storage is completely client based hence it cannot be accessed or modified from server side.

OK…now since we understood the difference between Web Storage and Cookies, Let’s discuss Web Storage in more details.

As I mentioned earlier, Web storage comes in two forms. Local Storage and Session Storage. The difference is really simple and straight forward as explained below.

Local Storage

Local Storage, stores data permanently in the browser it won’t be deleted or erased automatically. You would have to manually delete those items if we don’t want. The behavior is similar to persistent cookies without any expiration date.

This is how you can set/get local storage from JavaScript as below:-

// Set

localStorage.setItem("fullName", "Piyush Gupta");

// Get

var name = localStorage.getItem("fullName");

Or below is also valid

// Set

localStorage.fullName = "Piyush Gupta";

// Get

var name = localStorage.fullName;

Session Storage

Session Storage is equal to the local Storage, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab. 

Please note, the data can survive page load or redirects but is bound to one specific tab. Any new tab or window cannot access session data set by previous tab.

You can set/get session storage from JavaScript as below:-

// Set

sessionStorage.setItem("fullName", "Piyush Gupta");

// Get

var name = sessionStorage.getItem("fullName");

Or below is also valid

// Set

sessionStorage.fullName = "Piyush Gupta";

// Get

var name = sessionStorage.fullName;

Word of advice:-

As I mentioned already, although Web Storage is now supported by almost all browsers but please don’t blindly assume this and always perform a check whether web storage is supported by user's browser or not before using it. You can do this by below:-

if(typeof(Storage) !== "undefined") {

    // Code for localStorage/sessionStorage.

} else {

    // Sorry! No Web Storage support..

}

You can check the list of supported browsers here.

That’s all I had to share with you. Choose wisely when deciding how you want to keep you data on client side. Cookies are good and still widely used but Web Storage does provide some benefits over it.