HTML5 Local Storage

HTML 5 Local Storage is based on key/value pair where key should be unique. Unlike Cookies, data is never transmitted to every page of website in case of HTML 5 Local Storage.

You can store any value in local storage which is supported in JavaScript. Note that data is stored in form of string so if you store an integer number then to get it back, you would need to call parseInt function to convert it to an integer.

There are many functions available with HTML 5 Local Storage i.e. setItem(…), getItem(…), removeItem(…), clear(), key(…). In addition to it, there is a property available “length”.

1. setItem

The syntax for it is setItem(key,data). For example, to store username we would do as follows:

localStorage.setItem("username", "Omer Javed");

2. getItem

The syntax for it is getItem(key). For example, to get data of of key "username" we would do as follows:

var user_name = localStorage.getItem("username");

Another way to access any item is like:

var user_name = localStorage["username"];

3. removeItem

As name says, it is used to remove an item from local storage. The syntax for it is removeItem(key).

4. clear

It is to delete all keys and data from local storage.

5.key

It is to retrieve key at particular index. The syntax for it is key(index).

6.length attribute

It is to find out total number of entries in local storage.