After a long gap I am plan to post an article in Html5 local Storage, what is the use of local Storage and which way it will be helpful to storing the data.
HTML5 has a feature to store & retrieve data from the client user browser without affecting website performance and not to round-trip the server. Previously data stored in cookie side but there is a limitation to store the data which can be handle in JavaScript or server-side.
But its not possible to store huge data like local Storage. HTML5 local Storage can store huge data with key pair value format, also support fetching, remove and clearing the data.
Before walk-though the prototype, will list out the method going to use.
- set – localStorage.setItem(key,value)
- get – localStorage.get(key)
- remove – localStorage.removeItem(key)
- removeAll – localStorage.clear()
- console – console.log
var storage = {
set:function(arr) {
// check browser support for localStorage or not, print the error message in console
if(typeof(Storage)==undefined)
{
this.console('Browser not supporting storage')
} else {
// assigning the key from the object
keyName = Object.keys(arr);
// setting up key & value in localStorage
localStorage.setItem(keyName,arr[keyName]);
}
},
get:function(key_Name) {
// checking the key is exists or not
if(localStorage.getItem(key_Name)!=undefined)
{
// fetching value from the given key
return localStorage.getItem(key_Name);
}
},
remove:function(key_Name)
{
i = 0;
if(localStorage.getItem(key_Name)!=undefined)
{
// removing the key from localStorage
localStorage.removeItem(key_Name);
}
return i;
},
removeAll:function(key_Name)
{
// removing all the key from localStorage
localStorage.clear();
},
console:function(s) {
// print value in console
console.log(s);
}
}
Implementing local Storage prototype in our html, let’s create set_value.html file to store the value.
<html>
<head>
<title>HTML5 local Storage storing the value</title>
<script src="storage.js"></script>
</head>
<body>
<div id="divLoad"></div>
<script language=="javascript">
// storing the data in 'name' key
storage.set({'name':'Welcome to HTML5 localStorage'});
</script>
</body>
</html>
Now we will fetch data from another html file get_value.html using key.
<html>
<head>
<title>HTML5 local Storage fetching the data</title>
<script src="storage.js"></script>
</head>
<body>
<div id="divLoad"></div>
<script language=="javascript">
// fetching the data from key 'name'
document.getElementById("divLoad").innerHTML = storage.get('name');
</script>
</body>
</html>
You may ask the question how to see the stored data in the browser. If you are using Chrome browser you can click Resource from the inspect element by right clicking the browser. Which will show the local Storage key pair value for that domain like below.
