HTML5 Storage APIsHTML5 Storage APIs

If you are already fascinated with the HTML5 platform, and have adopted its features then you are probably familiar with the Offline Web Storage APIs it comes with, ie. local storage and session storage. If you are not, let’s take a look at them now.

We developers, working with browsers, are well acquainted with the concept of cookies. Cookies are used to store values on the user-end and those values can then be accessed by server-side scripts for keeping track of the user’s activities, information etc. With most modern browsers however, things have changed in many areas, including the storage system. HTML5 has brought in the Web Storage specification, which defines two properties of the Javascript window object in terms of storage – “localStorage” and “sessionStorage”.

With localStorage and sessionStorage, HTML5 now allows us to store almost anything and everything on the client side, unlike other storage techniques. This also allows your apps to run in the offline mode too. So imagine a situation where user comes to your website or your HTML5 powered mobile app, does a lot of activities and your app is storing every single piece of information using web storage properties. The user might not be connected to the Internet, but that does not interfere with his/her experience in your app. The app loses nothing and simply syncs the data back onto the web server as soon as it gets the an Internet connection.

Why use HTML5 web storage?

There are number of reasons for using it.

Firstly, because your system is capable of working even in an offline mode. As long as your app can sync the stored data back with the web server when it gets online, the user losing his Internet connection will not hamper his experience on your app.

It allows you to store a huge amount of data and you can use this feature efficiently with your web/mobile app to show data to users visiting the app immediately, while your latest data is being pulled from the server thus making for a better user experience.

Thirdly, it does not involve any infrastructure cost for server maintenance and it is pretty easy to use. You can store, retrieve, iterate through and delete data with just one line of code.

The Difference between localStorage and sessionStorage

The difference between the two storage systems is small and when to use which depends upon the requirement of the app.

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. It will persist as long as you do not delete it explicitly.

The sessionStorage object is similar to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window, or his session ends in some way.

So imagine a case where a user has opened the same link in two different browsers. localStorage will show the same value for a particular key whereas session storage will show different values depending upon the session in each browser.

A local storage value is not killed until you explicitly write the code to remove or destroy it whereas session storage value becomes nil as soon as you leave the app, or your session ends.

When to use what

Session storage is a bit more secure than local storage, as it doesn’t store values beyond sessions and limits data access to a single window, thereby making it a bit less vulnerable to harmful data access. Local storage on the other hand is capable of storing large quantities of data, which can also be misused, so its better not to save critical data in local storage. In fact, I will go to the extent of saying that while these storage APIs are very useful, it is better not to use any of these to store any critical piece of user information as both of them are somewhat prone to getting hacked. But if the data is not too critical, there’s really no reason why you should not use them.

For example, if you want to save the current state of the application or any activity etc., prefer local storage, again for important data like user information, which you don’t want to be misused, use session storage, or better still save them directly on your web server, bypassing both web storage APIs.

Examples of usage

Function Local Storage Session Storage
Create window.localStorage.setItem('name', 'Neha Singh'); window.sessionStorage.setItem('name', 'Neha Singh');
Retreive window.localStorage.getItem('name'); window.sessionStorage.getItem('name');
Remove window.localStorage.removeItem('name'); window.sessionStorage.removeItem('name');
Clear All window.localStorage.clear(); window.sessionStorage.clear();

Subscribe to my RSS feed and never miss an article!