HTML5 Localstorage

Html5 Local storage

Local storage in html5 is a way to store values in format of key/value pair in your web browser. same like cookies data persists after you close the browser or navigate away from your web application or website.

The only difference between cookies and local storage is that local storage is not transmitting data to web server unless you send it manually.

Local storage feature is available natively in web browser so it will work even of there is no third party plugins installed in browser.

Local storage supported browsers

Browser
Version supported
IE
8.0+
Firefox
3.5+
Safari
4.0+
Chrome
4.0+
Opera
10.5+
IPhone
2.0+
Android
2.0+


Check if your browser is supporting local storage.

If your browser is supporting local storage then you will get localstorage property in global object window.

// Comment
function Check_localstorage_support() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
}
catch (e) {
return false;
}
}
You can use above function to check whether your browser supports local storage or not.
If your browser is supporting local storage then it will return true else it will return false. 

Use local storage 

As local storage is string data in key/value pair, you can store data based on named key. Key name is stored as string. 

Also you can retrieve data using same key that you have used for storing data.

value could be of any type supported by java script. It could be Boolean, string or int.

Actually values is stored as string so when you are retrieving data other than string you need to parse value in it’s actual type. for e.g you are retrieving integer value then you need to use parseInt() function to parse string value in integer.


Set value in local storage

To set value in local storage you can use setItem() function of local storage.

Syntax: setItem(key, value);
for e.g. localstorage.setItem(“name”,”Mitesh Gadhiya”);

Here we are giving key = name and value = Mitesh Gadhiya so it will store Mitesh Gadhiya under key name.

If you are setting value for the key that is already exists then value for that key will be overwritten silently.

We can use local storage as associative array to so we can access local storage using square brackets too. 
For e.g localstorage[“name”] = “Mitesh Gadhiya”;

Retrieve values from local storage
To get values we can use getItem() function.

syntax: localstorage.getItem(key);
for e.g. var name = localstorage.getItem(“name”);
It will set value as Mitesh Gadhiya in variable name.

Also we can retrieve value like array.
var name = localstorage[“name”];  

Remove values from local storage
To remove values from local storage we can use removeItem() function.

syntax: localstorage.removeItem(key);
for e.g. var name = localstorage.removeItem(“name”);
It will remove value of key name.

Access local storage values by index
when we use localstorage then we are storing lots of data in localstorage. This all data it can iterate through key.

synatax: localstorage.key(index);
for e.g: var var_key = localstorage.key(0);

It will set key name in variable var_key.

If we call key() with an index that is not between 0–(length-1), the function will return null.

Limitations of local storage

As every features have their drawbacks or limitations local storage also have some limitations.

First limitation for HTML5 local storage is that it is giving 5 megabytes storage space to store data in localstorage.

If we use 5 mega bytes storage quota and exceed our limit then it will give exception of QUOTA_EXCEEDED_ERR.

And no browsers support mechanism to request more storage space.


 Cheers..!
Written by Mitesh Gadhiya