HTML5 Web Storage Example

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.

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>

<!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.

Insert a <script></script> tag before the </head> tag.
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.
To Verify if web storage is supported

JavaScript

function check_support() { if(typeof(Storage) == "undefined") { alert("Sorry! No web storage support!"); return false; } return true; }

1
2
3
4
5
6
7
8
9
10

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));
	}
}

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);
	}
}

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));
	}
}

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);
	}
}

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

JavaScript

function clear_data() { if (check_support()) { localStorage.clear(); sessionStorage.clear(); } }

1
2
3
4
5
6
7
8
9

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>

<!DOCTYPE HTML>

<html>

<head>

<title>HTML5 Web Storage</title>

// 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.

Note: If you have problem with running local file using Google Chrome, try this: Open Local File in Google Chrome

Harvard Business Evaluation

Is Paperial Legitimate?

Is it Legal to Pay a Professional Writer to Write My College Paper?

Leave a Reply Cancel reply