Session handling is a crucial aspect of web development, especially for maintaining user data and ensuring seamless navigation between pages. Although JavaScript is the primary language for handling client-side tasks, developers often rely on jQuery, a widely-used, lightweight, and fast JavaScript library, to simplify and streamline their code. This article will explore the key aspects of session handling using jQuery, including an introduction to jQuery, storing and retrieving session data, and managing session timeouts.

What is jQuery?

jQuery is a popular open-source JavaScript library that simplifies various tasks, such as HTML document traversal, manipulation, event handling, and animation. It’s designed to make it easier for developers to write client-side scripts that are compatible with multiple browsers. By providing a more intuitive syntax and handling many common JavaScript issues, jQuery allows developers to focus on the core functionality of their web applications.

Storing and Retrieving Session Data with jQuery

While jQuery does not have built-in support for session handling, we can leverage the sessionStorage and localStorage objects provided by modern browsers’ Web Storage API. sessionStorage allows you to store data only for the duration of a page session, whereas localStorage retains the data even after the session ends.

To set session data using jQuery, you can use the following code snippet:

$(document).ready(function() {
  sessionStorage.setItem("key", "value");
});

This code stores a key-value pair in the sessionStorage object. To retrieve the stored data, use the following code:

$(document).ready(function() {
  var data = sessionStorage.getItem("key");
  console.log(data); // Outputs: value
});

Managing Session Timeouts with jQuery

Session timeouts are important to manage user sessions and prevent unauthorized access to sensitive data. Here’s how you can implement a simple session timeout using jQuery:

  1. Create a timer that resets whenever the user interacts with the page:
var sessionTimeout;
$(document).bind("mousemove keypress", function() {
  clearTimeout(sessionTimeout);
  sessionTimeout = setTimeout(sessionExpired, 600000); // 10 minutes
});
  1. Define the sessionExpired function that will be executed when the session times out:
function sessionExpired() {
  alert("Your session has expired.");
  sessionStorage.clear(); // Clear the sessionStorage
  window.location.href = "login.html"; // Redirect to the login page
}

This code sets up a 10-minute session timeout that resets whenever the user moves the mouse or presses a key. If the session expires, the user will be redirected to the login page, and the sessionStorage will be cleared.

Conclusion

Session handling using jQuery is an efficient and convenient way to maintain user data and manage session timeouts on the client-side. By leveraging the Web Storage API and jQuery’s event handling capabilities, developers can create robust and secure web applications that offer a seamless user experience.

21 Comments

    1. Yes you can Faud hasan,
      For example : $.session.set(‘address’, [‘jog’,’400102′]);
      This will add value in array to key address.
      And in output you will get comma separated values : (i.e: jog,400102).
      Thanks.

      Reply

      2. not working in:
        onclick=’$.session.set(“keycol”, [“TINGKAT”]);alert($.session.get(keycol));’
        onclick=’$.session.set(“keycol”, [“TINGKAT”]);alert($.session.get(keycol[0]));’

        Reply

        1. Hi,
          Actually in get function you have not added key in double quotes.
          So for set & get like as follows,
          SET : $.session.set(“keycol”, [“TINGKAT”]);
          GET : $.session.get(“keycol”);
          Thanks.

          Reply

  2. hi there..
    i set the session through jquery using this plugin..
    now i want to retrive it using PHP… but i am unable to do so…
    if i retrive using .get method of this plugin.. it shows the value…but not in PHP’s $_SESSION

    Reply

  5. Hey, i m implementing token based authentication, though i have token in my headers for specific users and i also want to handle my session with that token key how do i do that ??? thanks …

    Reply

  6. Hi Hitesh,
    If you are using jquery, then you have store that token in localstorage. and based on that you have to perform further operations. and every request you have to check response which is coming from backend. and if its not logged in send back to login page and clear the localStorage.
    Thanks.

    Reply

  7. Hi Inaam,
    It was an awesome article, however, I was wondering if is there any way to do the same thing but between different js files, for example in A.js I set a variable with session as you say ($.session.set(‘variable’,’value’)) and in B.js I get the value of variable ($.session.get(‘variable’)). Just like SESSION in PHP but with js and jquery. The thing is that I’m not using PHP so that I’m looking for alternatives. If could help me, it could be great!
    Thanks.

    Reply

      1. Hi Inaam,

        I have used the same jQuery session library. But I am unable to get jQuery Session variables on other page. On same page it is working perfectly when I try to access on other page it gives me undefined value.

        Please help me and if you already tried jQuery session on other pages.

        Thanks in Advance.

        Reply

        1. Hi Kumar,
          sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.
          In this scenario you have to use localStorage.
          Thanks.

          Reply

  8. Hi Inaam ,

    This is awesome plugin but its not working in another page.Please give me solution ASAP

    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *