Working with HTML5 local Storage prototype

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.

  1. set – localStorage.setItem(key,value)
  2. get – localStorage.get(key)
  3. remove – localStorage.removeItem(key)
  4. removeAll – localStorage.clear()
  5. 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.

HTML5 local Storage display the data for that domain

HTML5 local Storage display the data for that domain

 

 

Share