One of the great feature of HTML5 has is web storage. This feature allows you storing data between page access. As we know everytime a page is loaded, the data in the javascript variables are reset. Most programmers will overcome this situation by using behind code to store the data via session or cache. Well if you are using pure HTML5 and javascript only, this feature will be quite handy to use.

The following attributes are available in the sessionStorage properties.

• length
• key
• getItem
• setItem
• removeItem
• clear

length

This attribute is used to determine the length/number of the sessionStorage objects. Return to sessionStorage Attributes Index List.

key

This attribute is used to determine the index of sessionStorage object. Lets say you have 5 objects sessionStorage, if you want to get the third sessionStorage you can just use key(3). Return to sessionStorage Attributes Index List.

getItem

This attribute is used to get the value of the sessionStorage, the getItem property requires a key name. Return to sessionStorage Attributes Index List.

setItem

This attribute is used to set the value of the sessionStorage, the format will be setItem(key, value). Return to sessionStorage Attributes Index List.

removeItem

This attribute is used to remove a sessionStorage object. To use this, simply to include the key name, ex: removeItem(key). Return to sessionStorage Attributes Index List.

clear

This attribute is used to clear all sessionStorage objects. To use it, simply call clear(). Return to sessionStorage Attributes Index List.

Quick Demo

In below form, you will be able to store, get and clear the sessionStorage object.

Here is the full HTML5 and Javascript source code.

/* This will be the HTML5 codes */
<div class="demobox">
	<p>Enter your data in here: <input type="data" id="txtData" type="text" /></p>
	<p>
	   <input type="button" value="Set Value" onclick="setValue()" /> 
	   <input type="button" value="Get Value" onclick="getValue()"/> 
	   <input type="button" value="Clear All Values" onclick="clearAllValues()"/> 
	</p>
</div>

/* This will be the javascript codes */
<script type="text/javascript">
	//Function to set sessionStorage object
	function setValue(){
		//Get textbox object
		var obj = document.getElementById("txtData");
		if(obj.value == ""){
			alert("Please enter your sample data.");
			obj.focus();
			return;
		}
		//Set the sessionStorage object value
		sessionStorage.setItem("MySampleData", obj.value);
		obj.value = "";
		alert("Your data: "   obj.value   " has been saved.");
	}

	//Function to get sessionStorage object
	function getValue() {
		//check if sessionStorage is null or not based on the key name
		if (sessionStorage.getItem("MySampleData") == null) {
			alert("There are no data stored in web storage.");
		} else {
			alert("Your data is "   sessionStorage.getItem("MySampleData"));
		}
	}

	//Function to clear all sessionStorage objects
	function clearAllValues() {
		sessionStorage.clear();
		alert("Your data has been cleared.");
	}
</script>