Model browser like Mozilla Firefox and Google Chrome are equipped with the HTML5 web storage capabilities which used for storing data in a web browser. This tutorial will guide you on how to store the data by using both local storage and session storage.

Local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Data placed in local storage is persists after the browser is closed. However, session storage is per-page-per-window and is limited to the lifetime of the window.

  1. Let’s create a html file with 5 buttons as following.
    <!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Web Storage</title>
</head>
<body>
<h1>HTML5 Web Storage</h1><br />
<button type="button" onclick="write_local_storage()">Write Local Storage</button>
<button type="button" onclick="read_local_storage()">Read Local Storage</button>
<button type="button" onclick="write_session_storage()">Write Session Storage</button>
<button type="button" onclick="read_session_storage()">Read Session Storage</button>
<button type="button" onclick="clear_data()">Clear</button>

</body>
</html>
    The button’s onclick event will be fired and call each respective function accordingly whenever user click the button.
  2. Insert a <script></script> tag before the </head> tag.
  3. Let’s start to create all the javascript based function within the <script></script> tag now so that each button will carry its own functionality.
  4. To Verify if web storage is supported
    function check_support()
{
	if(typeof(Storage) == "undefined")
  	{
  		alert("Sorry! No web storage support!");
		return false;
	}

	return true;
}
  5. Write to local storage
    function write_local_storage()
{
	if (check_support())
	{
		var persistObject = { 'Smith': 23, 'Kobi': 18, 'Alex': 32 };

		// Put the object into storage
		localStorage.setItem('persist_data', JSON.stringify(persistObject));
	}
}
  6. Read from local storage
    function read_local_storage()
{
	if (check_support())
	{
		// Retrieve the object from storage

		var storage = window.localStorage; 

		var retrievedObject =  storage.getItem('persist_data');
		var length = storage.length;

		alert("Retrieving " + length + " item(s) from localstroage");
		alert(retrievedObject);
	}
}
  7. Write to session storage
    function write_session_storage()
{
	if (check_support())
	{
		var sessionObject = { 'keycode': 111, 'passpharse': 222, 'id': 888 };

		// Put the object into storage
		sessionStorage.setItem('session_data', JSON.stringify(sessionObject));
	}
}
  8. Read from session storage
    function read_session_storage()
{
	if (check_support())
	{
		// Retrieve the object from storage

		var storage = window.sessionStorage; 

		var retrievedObject =  storage.getItem('session_data');
		var length = storage.length;

		alert("Retrieving " + length + " item(s) from localstroage");
		alert(retrievedObject);
	}
}
  9. Clear all storage data
    function clear_data()
{
	
	if (check_support())
	{
		localStorage.clear();
		sessionStorage.clear();
	}
}

The final content of the html file will look similar like the following: 

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Web Storage</title>
<script>
// Verify if web storage is support
function check_support()
{
	if(typeof(Storage) == "undefined")
  	{
  		alert("Sorry! No web storage support!");
		return false;
	}

	return true;
}

// Write to local storage
function write_local_storage()
{
	if (check_support())
	{
		var persistObject = { 'Smith': 23, 'Kobi': 18, 'Alex': 32 };

		// Put the object into storage
		localStorage.setItem('persist_data', JSON.stringify(persistObject));
	}
}

// Read from local storage
function read_local_storage()
{
	if (check_support())
	{
		// Retrieve the object from storage

		var storage = window.localStorage; 

		var retrievedObject =  storage.getItem('persist_data');
		var length = storage.length;

		alert("Retrieving " + length + " item(s) from localstroage");
		alert(retrievedObject);
	}
}

// Write to session storage
function write_session_storage()
{
	if (check_support())
	{
		var sessionObject = { 'keycode': 111, 'passpharse': 222, 'id': 888 };

		// Put the object into storage
		sessionStorage.setItem('session_data', JSON.stringify(sessionObject));
	}
}

// Read from session storage
function read_session_storage()
{
	if (check_support())
	{
		// Retrieve the object from storage

		var storage = window.sessionStorage; 

		var retrievedObject =  storage.getItem('session_data');
		var length = storage.length;

		alert("Retrieving " + length + " item(s) from localstroage");
		alert(retrievedObject);
	}
}

// Clear all storage data
function clear_data()
{
	
	if (check_support())
	{
		localStorage.clear();
		sessionStorage.clear();
	}
}
</script>
</head>
<body>
<h1>HTML5 Web Storage</h1><br />
<button type="button" onclick="write_local_storage()">Write Local Storage</button>
<button type="button" onclick="read_local_storage()">Read Local Storage</button>
<button type="button" onclick="write_session_storage()">Write Session Storage</button>
<button type="button" onclick="read_session_storage()">Read Session Storage</button>
<button type="button" onclick="clear_data()">Clear</button>

</body>
</html>

If you open the html file from web browser, you should observe the following screen. Try to click the button to experience the web storage feature powered by HTML5.
HTML5 Web Storage Example
Note: If you have problem with running local file using Google Chrome, try this: Open Local File in Google Chrome