Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

HTML5 Local Storage API

HTML5 Local Storage API

In this HTML5 tutorial, you will learn that how to store your browser data locally in localStorage. localStorage API is a more secure then browser cookies and here we store large amount data locally. The Storage limit of localStorage is 5 megabytes(5mb) instead of web cookies storage only 4095 bytes(approximately 4kb).

Some Steps About HTML Code:-

[step:1] Start with HTML5 basic syntax.
[step:2] Use input type text and a submit button.

HTML Code Start Here

<!DOCTYPE html>
<html lang="en">
<head>
<title>Html5 local Storage Tutorial by - Infonic Training</title>
<meta charset="utf-8">
<meta name="description" value="Local Stroage In Html5">
<meta name="keywords" value="Video tag use in html5">


</head>
<body>

<input type="text" />

<input type="button" value="Submit">

</body>
</html>

Some Easy Steps About JavaScript Code

[Step:1] create a function save().
[Step:2] Call onclick event on submit button with save function. By this we insert our data in Storage.
[Step:3] After that create a function get().
[Step:4] Their in body we call a event onload with a function get. By this we get our data on webpage.
[Step:5] After that create a remove button.
[Step:6] create a function remove().
[Step:7] then call a event in remove button with function remove. By this we delete our data from from Storage.
[Step:8] When we start javascript first of all check your browsing support with if candition. if this condition is getting true then your browser support localStorage API and if candition is false else part will be active that means your browser can not support localStorage API. So for this update your browser instantly.

JS Code Start Here:-

if(typeof(Storage)!=="undefine")
{
	
	function save()
	{
		var insert=document.getElementById('name').value;
		localStorage.setItem('text', insert);
	}
	
	function get()
	{
		var fetch=localStorage.getItem('text');
		if(fetch) 
		{ document.getElementById('name').value=fetch;}
	}


	function remove()
	{
		document.getElementById('name').value='';
		localStorage.removeItem('text');
	}
}

else
	{
	 document.getElementById('name').innerHTML="sorry";
    }

Now Complete Code Of HTML File After Using JavaScript Events And Functions:-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Html5 local Storage Tutorial by - Infonic Training</title>
<meta charset="utf-8">
<meta name="description" value="Local Stroage In Html5">
<meta name="keywords" value="Local Stroage In Html5">

<script>
if(typeof(Storage)!=="undefine")
{
	
	function save()
	{
		var insert=document.getElementById('name').value;
		localStorage.setItem('text', insert);
	}
	
	function get()
	{
		var fetch=localStorage.getItem('text');
		if(fetch) 
		{ document.getElementById('name').value=fetch;}
	}


	function remove()
	{
		document.getElementById('name').value='';
		localStorage.removeItem('text');
	}
}

else
	{
	 document.getElementById('name').innerHTML="sorry";
    }
</script>
</head>

<body onLoad="get()">

<input type="text" id="name" />

<input type="button" value="Submit" onClick="save()">
<input type="button" value="Remove" onClick="remove()">

</body>
</html>

[Note] Right some text and save. Now run your webpage and use right click of the mouse and open inspect[ctrl+shift+I] option. After that click on application menu and see the left side of this. you see a localStorage menu now click on it and see your save data.

Basically we use two types of web storage:-
1. window.localStorage:- [Stored data without any expiration date]
2. window.sessionStorage:- [Storage data with expiration date (data is lost when browsing tab is closed)]

Their are three methods of webStorage:-
1.setItem
2.getItem
3.removeItem