JavaScript to Show Session Timeout Counter

• Download source - 2.04 KB

Introduction

This article shows how to display the remaining minutes as a counter for a session to timeout on the Webpage that will change after every minute and a message will be displayed when the session timeout will be equal to 0 (zero).

One thing to keep in mind is that the code provided will neither timeout the session or is it responsible for any session related activity. It will just show the timeout counter on the screen depending on the session timeout set within the application. If any additional things are required, additional code has to be written.

Background

It might be possible that in some applications, a developer wants to display the time left for the session to be over or timeout. That will enable the user to save the entered information or it can be used for any other purpose depending on the requirement.

The JavaScript code that will be used to achieve this is as follows:

<script type="text/javascript">
        var sessionTimeout = "<%= Session.Timeout %>";
        function DisplaySessionTimeout()
        {
            //assigning minutes left to session timeout to Label
            document.getElementById("<%= lblSessionTime.ClientID %>").innerText = 
                                                                        sessionTimeout;
            sessionTimeout = sessionTimeout - 1;
            
            //if session is not less than 0
            if (sessionTimeout >= 0)
                //call the function again after 1 minute delay
                window.setTimeout("DisplaySessionTimeout()", 60000);
            else
            {
                //show message box
                alert("Your current Session is over.");
            }
        }
</script>

The code on page load event to register the JavaScript method on startup is as follows:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //set DisplaySessionTimeout() as the startup script of this page
            Page.ClientScript.RegisterStartupScript(this.GetType(),
                "onLoad","DisplaySessionTimeout()", true);
        }
    }

Screenshots

History

• 26^th March, 2008: Initial post