Over a million developers have joined DZone.

HTML5 Local Storage API

· Java Zone

Learn more about how the Java language, tools and frameworks have been the foundation of countless enterprise systems, brought to you in partnership with Salesforce.

It has started to become a common requirement for Web applications to have some support for offline usage. HTML 5 local storage (hereafter local storage) is one of the options to consider when you need to support offline use of your web application. But what is local storage, and when should you consider it. Let’s go through what you need to know before you start using local storage.

What is HTML5 Local storage API?

Local storage is a storage of key-value pairs (KVP) which you can store and access using a JavaScript API. It is supported by most of major browsers (even IE8 does support it :)). The KVPs are string values of information used to store in the storage of the browser

e.g.  “CMS” => “WordPress”

Local storage has several advantages over Cookies and can be a good substitute for them. Cookies have the size limitation of 4KB, on the other side, the usual supported size for Local storage is 5MB. Also, cookies are sent to the server with every request, overloading the bandwidth, whilst, Local storage is not sent to the server any request, instead, only the required value is send.

Local storage is a persisted storage and have no expiration time. The data persisted will stay until cleared. There is another variant of browser storage which is temporary, and that is Session storage. Session storage is used only for the session, and when session expires or is destroyed, so is the session storage.

Storing and reading from Local storage

Before starting to use the Local storage, it is advisable you always test first if it is supported by the browser, and you do it with a simple check like this:

if (window['localStorage'] !== null) {
//your code here

Storing values to Local storage is done using setItem() function. This method accepts two parameters, the first one is the key, and second parameter is the value. e.g.

localStorage.setItem("cms", "WordPress");

If we open chrome developers tool in resources tab, we can see the values in local storage, and there is our “cms” key with value set to “WordPress”

Local storage in chrome developer tools

Reading the stored value is done using getItem() function and supplying the key as a parameter. e.g.

var cmsValue = localStorage.getItem("cms");

Other functions

There are several other useful functions which you can use with Local storage. If you want to get the total number of keys stored you can use localStorage.length property, or if you want to remove one item from the storage you can do this by calling removeItem function. e.g.

var numberOfItems = localStorage.length;


It is also possible that you clear the whole list of items stored by calling function clear e.g.



In some more advanced scenarios, you may want to track changes in local storage, that is where events come in. Events are out of scope of this post, however, it is good to remember that they are there should you have such a requirement.


If you want to get in details, the specification of the local storage can be found in this link:Web Storage specification

Discover how the Force.com Web Services Connector (WSC) is a code-generation tool and runtime library for use with Force.com Web services, brought to you in partnership with Salesforce.


Published at DZone with permission of Arian Celina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}