Session handling using jquery

January 20, 2015
by Inaam Hussain

In this tutorial we will learn to handle sessions using jquery.For handling sessions here we will be using sessionStorage object. which is similar to localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

Using JquerySession plugin will make our task much simpler and easy to manage.

View demohere
Download Codehere
Download Jquery Session pluginhere

In demo you can see that how to add, remove, get session variable with it’s description.

Before using plugin functionality please include “Jquery” & “JquerySession”(Here) plugin in main index file.

So, let’s start with JquerySession plugin functionality

Add session variable

Syntax : $.session.set(‘some key’, ‘a value’);

Description : Using “set” we can easily add value to session.

Example : $.session.set(‘Name’,’Inaam’) : “Name” -> Key & “Inaam” -> Value

 

Clear session variable

Syntax : $.session.remove(‘some key’);

Description : Using “remove” we can remove particular session variable.

Example : $.session.remove(‘Name’) : “Name” -> Key

 

Fetch session variable

Syntax : $.session.get(‘some key’);

Description : Using “get” we can fetch particular session variable.

Example : $.session.get(‘Name’) : “Name” -> Key

 

Remove all session variable

Syntax : $.session.clear();

Description : Using “clear” we can clear full/all session data.

Example : $.session.clear()

These are the commands we can use for handling session using Jquery & Jquery Session plugin.

 

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

23 comments

  1. |

    Sorry Mr. can I set session as array value?

    • |

      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.

      • |

        Oke thanks, i will try it 🙂 (y)

      • |

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

        • |

          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.

  2. ashish
    |

    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

    • |

      Hi Ashish,
      You can use one at a time either by using jquery or PHP’s session. if you are using PHP then you should go for PHP Session.
      Thanks.

  3. |

    Hussain ji its giving me undefined error

    • |

      Hi Chandan,
      Where exactly you getting undefined error?

  4. nagaraj
    |

    session removed if i close and open browser, how can i solve this?

  5. Hitesh
    |

    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 …

  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.

  7. Jesus Sánchez
    |

    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.

    • |

      Hi,
      yes you can access that variable in another page as well. However it store values in browser storage, so that its easily accessible.
      Thanks.

      • |

        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.

        • |

          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.

  8. Akhil Agrahari
    |

    Hi Inaam ,

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

    Thanks

    • |

      For that, you need to go for localStorage. which you can access through multiple tabs.
      Thanks.

  9. |

    i have set the Session but cont able to Retrieve In another page ASPX please send some Ideas

  10. Hanamant
    |

    Hey i am setting list in session in servlet and sending to jsp .but i want to iterate using jquery can u help..

    • Inaam Hussain
      |

      Hi,
      In this tutorial just explained how we can use sessionStorage in browsers.
      Can you please elaborate what exactly u need to iterate?
      Thanks.

Leave a Comment