The sessionStorage object

The session storage stores the data till the user's session expires, i.e. user closes its browser window. The session object survives page refresh. In some browsers the value is restored on browser crash also. The difference between cookies and session storage is:

Session has data storage capacities in few MB’s as against cookies which is in KB’s.
Session storage data gets deleted on browser close command, tab change even for tabs of same browser, whereas, cookies are stored on the tab change.

The sessionStorage object is stored in the window object and can be accessed as window.seesionStorage.

The example below stores an user's input even on webpage reload. Without the sessionStorage, the data entered by user is set to null.

Example of sessionStorage object

<!DOCTYPE html>
<html>

<body>
	<form>
		Enter name<input type="text" id="name">
		<button onclick="location.reload(true)">Click here to Refersh</button>
	</form>
	<script>
		if(window.sessionStorage){
			var input=document.getElementById("name");
        /*Takes the value from session storage if it already exists.*/
	    	if(sessionStorage.getItem("userName")){
				input.value = sessionStorage.getItem("userName");
			}	

        /*If there is change of value at input, store new value at session storage*/
			input.addEventListener("change", function(){
				sessionStorage.setItem("userName", input.value);
			});
		} 
	</script>
</body>

</html>

›› go to examples ››

The sessionStorage object

Example of sessionStorage object

Comments

About

Contact

Get Connected