JavaScript - SPLessons

JavaScript Session

Chapter 14

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

JavaScript Session

JavaScript Session

shape Description

Basically, a Session is a storage that consists of information on server-side. JavaScript Session will be in active state till the user interacts with a website or web application.


As a replacement to cookies that store constantly changing data in user’s browser, a unique identifier is stored on client side known as Session Id. Whenever the browser makes an HTTP request, the session id is passed to the web server every time. This session id pairs up with internal database and retrieves the variables as per the request.


Purpose

Sometimes, server cannot identify the client from where it is getting requests. This happens when continuous requests and responses are received from the same client to the server. So, JavaScript Session tracking is used by providing session id’s to maintain the conversational state.


shape Conceptual

HiddenField

JavaScript is a client-side application and Session is a server-side application. So, there will be two options to set the JavaScript Session values.

  • On the client side, query the session value using AJAX on the server.
  • Sending the session value from the server to a client using HiddenField. So, JavaScript updates this value and send back to the server using submission or postback.





shape Examples

Below code shows how to set the JavaScript Session value in PageLoad event method.

protected void Page_Load(object sender, EventArgs e)
 
{
	 
	if (!IsPostBack)
	 
	{
	 
		//Set the session value first time
		 
		Session["EmpName"] = "Scott";
		 
		txtSessionValue.Text = Convert.ToString(Session["EmpName"]);
	 
	}
 
}

HiddenField value is obtained when the page is submitted.

protected void btnSubmit_Click(object sender, EventArgs e)
 
{
 
	//Set the session value from HiddenField
	 
	Session["EmpName"] = hdnSession.Value;
	 
	txtSessionValue.Text = Convert.ToString(Session["EmpName"]);
 
}

The resultant HiddenField value will be used in the form by setting the text box to HiddenField value.

<script type="text/javascript">
  
$(document).ready(function () 
{
  
	$('#<% =btnSubmit.ClientID %>').click(function (e) 
	{
	  
		$('#<% =hdnSession.ClientID %>').attr('value', $('#<%= txtSessionValue.ClientID %>').val());
	  
	});
  
});
  
</script>

Session Storage


shape Storage

To store the data for only one session, sessionStorage object can be used. In sessions, the data will be deleted when the user closes the browser tab.

shape Example

In the below example, the number of clicks on a button in the current session will be counted.

<!DOCTYPE html>
<html>
	<head>
		<script>
			function clickCounter() {
				if(typeof(Storage) !== "undefined") {
					if (sessionStorage.clickcount) {
						sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
					} else {
						sessionStorage.clickcount = 1;
					}
					document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
				} else {
					document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
				}
			}
		</script>
	</head>
	
	<body>
		<p><button onclick="clickCounter()" type="button">Click me!</button></p>
		<div id="result"></div>
		<p>Click the button to see the counter increase.</p>
		<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
	</body>
</html>

Output:The below output appears when the button is clicked for 3 times.


If the browser is re-opened, the page appear as follows.

Summary


shape Key Points

  • Session will run on Server-side.
  • Session stores the data only till the browser is active.
  • Session is stored using session.Storage object.