A Peek into Local Data Storage in HTML 5

Introduction

In this article I will be explaining one of the HTML 5 features which allow the storage of data on the client side. This feature certainly paves the way for developing data-driven applications which can work with data stored on the client even if the network connection is disconnected.

Local Storage and its Advantages

As the name suggests, by using HTML5’s web storage feature allows data to be stored on the client side and HTML 5-based web pages can access them directly on the client. This feature can be implemented using the combination of JavaScript and HTML 5.

You should differentiate this feature from that of using cookies. Below are some of the advantages that HTML 5 storage has when compared to cookie-based storage:

1. The data is stored totally on the client and does not shuttle between the client and server on each request or response.
2. The size of the storage space is large when compared to that of a cookie.
3. Session-based storage is available.

Browser Support

In HTML 5 it is always important to check for browser support while learning about a new feature. This is important because not all browsers have started supporting the full feature set of HTML 5. In fact, IE has started supporting many HTML 5 features with version 8.0 and above. Below are some of the prominent browsers which support the web storage feature:

1. Google Chrome 4.0 and above
2. Mozilla FireFox 3.5 and above
3. Internet Explorer 8.0 and above
4. Safari 4.0 and above

Storing Data on the Client

The data is stored in a key value pair manner. The storage limit on client is from 2 MB to 10 MB and this is based on the client browser. Normally the storage limit is around 5 MB. There are three types of client storage available in HTML 5.

Local Storage

This is used to store the data locally on the client machine and will be preserved even if the user closes the browser. The preserved data can be loaded and used when the user accesses the application at a later time. A typical example would be storing the user’s personalization settings. The JavaScript code that is used to access the local storage object is shown below:

var localStorageObj = window.localStorage;

Below two functions store and retrieve the values respectively.

function storePersistentValue() {

  //Check whether local storage is available or not

  if (window.localStorage) {

    window.localStorage.MyKey = "HTML 5 features";

  }

}

function getPersistentValue() {

  //Check whether local storage is available or not

  if (window.localStorage) {

    var text = window.localStorage.MyKey;

  }

}

The key value pairs can be accessed by any of the following means:

var text = window.localStorage.getItem("MyKey");

var text = window.localStorage.MyKey;

var text = window.localStorage["MyKey"];

Session Storage

As the name explains, storing the data using the session storage mechanism keeps the data only for that particular user session and unlike the local storage mechanism, the session storage mechanism will lose the stored data if the user closes the browser. This mechanism is useful in maintaining the user session-based data. Also the same session data can be accessed when the user is redirected to a different HTML 5 page.

Below are the functions that use the session data storage:

function storeSessionValue() {

  //Check whether session storage is available or not

  if (window.sessionStorage) {

    window.sessionStorage.setItem("MyKey", "HTML 5 features");

  }

}

function getSessionValue() {

  //Check whether session storage is available or not

  if (window.sessionStorage) {

    var text = window.sessionStorage.getItem("MyKey");

  }

}

Database Storage

HTML 5 also supports database storage. This is useful for storing the data in a structured manner unlike just the key value storage. This feature stores the data in a local SQL database. For now, not many browsers are supporting this feature.

Storage events

This is only supported in IE 9. Storage events allow the interception of the other events that are triggered. Below is the sample syntax:

window.addEventListener("storage", callbackMethodName, false);

You can perform the implementation as required in the callback method. In the callback method you will have access to the storage key, old value, new value, request url, storage location, etc.

Clearing the stored data

For clearing the storage data in HTML 5, the JavaScript method to be called is Clear(). You can clear a particular key value or the entire storage:

//Clears the value of MyKey

window.localStorage.clear("MyKey");

//Clears all the local storage data

window.localStorage.clear();

Conclusion

This article provides you with a peek at the local storage features of HTML 5. Please make use of the comments section to enter your comments. Also let me know if you would like any other HTML 5 topic to be covered.

Happy Reading!