Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 Local Storage API

DZone's Guide to

HTML5 Local Storage API

· Java Zone
Free Resource

Just released, a free O’Reilly book on Reactive Microsystems: The Evolution of Microservices at Scale. Brought to you in partnership with Lightbend.

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;

localStorage.removeItem("cms");

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

localStorage.clear();

Events

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.

References

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


Strategies and techniques for building scalable and resilient microservices to refactor a monolithic application step-by-step, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}