Over the years there have been many different web technologies developed to allow developers to store data to enhance the experience of the website user. The fairly recent rise of HTML5 has seen a new procedure to allow local data to be stored in the web browser using local storage.

As with cookies, local storage is the idea of letting the user of a particular website store data within the browser itself. However, there are a few advantages over cookies such as the 4k data limit, also cookies can also be disabled by many system and network administrators which can cause issues with web applications.

As with many web technologies, some browsers are quicker at adopting new features than others. A way to check if your browser supports this feature within your javascript code is to check for the datatype of ‘localStorage’.

if (typeof(localStorage) == ‘undefined’) {
alert(‘LocalStorage is not supported in this browser.’);
}

Items are stored in the users browser in a key value arrangement, the data is then retrieved using the key that was previously specified. To access local storage we can write some very basic javascript which will set a key that we specify.

localStorage.setItem(‘companyName’, ‘ForLinux Ltd’);

This will store an entry inside the users browser with a key of ‘companyName’ which we can then equally retrieve in a very similar way :-

var company = localStorage.getItem(‘companyName’);
alert(company);

Each item that we create with the users browser can also be removed using another simple javascript call.

localStorage.removeItem(‘companyName’);

The amount of data that we can store in a browser is significantly more than the other option of a cookie, with local storage it mostly depends on the browser, and at the moment that limit is somewhere between 5mb and 10mb depending on what browser you are using.

One thing to note with local storage is that it is exactly what it says on the tin, local – this means that the data is only set in the website users browser, it is not available to the server, and not even available to other browsers on the same desktop.

One of the main benefits of using local storage is that it is available to all browsers which support HTML5 (which are basically todays latest browsers), but this also includes browsers on mobile devices such as the iPhone and Android.