Html5 Local storage
Local storage in html5 is a way to store values in the format of key/value pairs in your web browser. The 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 the web server unless you send it manually.
Local storage feature is available natively in web browsers so it will work even if there are no third party plugins installed in the 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 the global object window.
// Comment
function Check_localstorage_support() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
}
catch (e) {
return false;
}
}You can use the 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 pairs, you can store data based on the named key. The key name is stored as a string.
Also you can retrieve data using the 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 are 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 the 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 already exists then value for that key will be overwritten silently.
We can use local storage as an associative array 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 the getItem() function.
syntax: localstorage.getItem(key);
for e.g. var name = localstorage.getItem(“name”);
It will set the value as Mitesh Gadhiya in variable names.
Also we can retrieve values like arrays.
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 the value of the 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..!
