Using HTML5 local storage, a web developer can save application data and store it as part of the data files of the web browser utilized by the end user. The web developer does not need to use cookies or save the data on the server.

Filed under

Before HTML5, it was not possible for web applications to store notable amounts of user data on the computer or device of the user. Application data had to be stored using cookies, commonly saving the data on a server and using the cookie to identify the correct sets of data, then including the cookie in every server request.

While this worked to some extent, storing larger amounts of data was not possible, and accessing the stored data on servers always comes with a delay caused by the roundtrip network communications between the client and the server. To address these deficiencies, HTML5 has introduced a new way of storing application data by means of "local storage". Developers may consider this a beneficial technology for storage, as the solution may be considered more secure (as information does not need to be transmitted over the network), definitely faster, and will be able to store more data.

As also specified in the standard, HTML5 local storage provides two objects for storing data:

The localStorage object stores data with no expiration date: The data will not be deleted when the browser is closed, while the sessionStorage object stores data for one session, and the data will be deleted when the session ends.

Basic usage of the functionality in an HTML5 application is simple:

localStorage.setItem("note", "This sample note");

This saves a text value "This sample note" to be associated with the key "note". To retrieve the value later (the browser may be closed in between), use code like this:

var item = localStorage.getItem("note");

Twitter Facebook LinkedIn Youtube Slideshare Github