Javascript Session Variables Without Cookies22nd of Dec 2010 - Samuli Hakoniemi

I was going to write one long blog post about advanced handling of browsing history, but then I decided to split this into two separate articles.

In this article I’ll represent a small JavaScript snippet I created for handling client-side session variables without cookies or Local Storage.

The snippet, Session.js, works on all modern browsers that support JSON natively. And if you want to extend it to work on browsers like Internet Explorer 6, you can use custom JSON implementation (eg. Sitepoint: Cross-browser JSON Serialization in JavaScript).

The reason I wrote this is simple – sometimes you just want to persist client-side variables during the whole session. In general, cookies are OK, but I personally dislike them to be used as very temporary data storages. I just don’t want to pollute cookie with (secondary) data that isn’t ever meant to be used after the session. Beside, cookies do not accept larger quantities of data.

Therefore I’m using window.name property. This property will exist during the whole session, and is automatically emptied when user closes the window or moves to another domain.

There are also other implementations of the very same topic, such as Thomas Frank’s sessvars.

Methods

There are following methods:

Session.setVar(string name, mixed value)

This sets the variable. You can add any type of value (number, string, boolean, object).

Session.getVar(string name)

This returns the variable. If such variable doesn’t exist, this returns false.

Session.removeVar(string name)

This removes the variable. If such variable doesn’t exist, this returns false.

Session.subscribe(string name, function callback)

This attaches a function to the variable. So whenever variable is set on the document, or is already set earlier during session, subscribed functions are fired. However, function won’t be fired when variable is removed, but the function itself will stay attached on the variable and fired if the variable is set again.

You can add a “namespace” for functions to distinct them for unsubscribing. This is done by adding a period on variable name: Session.subscribe(“foo.alertVariable”, function() { alert(Session.getVar(“foo”); });.

Session.unsubscribe(string name)

This simply unsubscribes certain function attached to the variable, eg Session.unsubscribe(“foo.alertVariable”).

Source Code

You can get the source code from here.

There is also very small demonstration available in here.

9 thoughts on “Javascript Session Variables Without Cookies

  1. Good and interesting article, nice and easy way to store temporary data on browser side. For sure this is useful at future. This can be used for also for ajax caching.

  2. bona on said:

    Will the session variables that were set stil exist if you navigate to another page within the same domain ?

  3. Samuli Hakoniemi on said:

    Yes. window.name will hold its value as long as you stay in the same domain.

  4. Shabbir on said:

    Will the session variables accessible across the broswser tabs or the same domain.

  5. SJ on said:

    How can i declare session variable as array of data , could you please show more example if this support

  6. Samuli Hakoniemi on said:

    Basic usage is:
    Session.setVar(“myArray”, [“foo”, “bar”, “foz”, “baz”]);

    Is this what you asked?

  7. pavan on said:

    I have one small query, using getVar i am able to get and using setVar – able to set also, but when i go to another page and come back i am not able to get value using getVar? may i know the reason..

  8. Samuli Hakoniemi on said:

    This snippet is partly obsolete and there’s a better support written by @webreflection at: http://code.google.com/p/sessionstorage/

    It mimics the HTML5 Session Storage for every browser and can be used to replace Session.js I’ve written.

  9. Harsh on said:

    Hi,

    I tried using your code but it looks to me either I’m making some error or it is not working in my environment. If you can take look into following URL that would be great.

    http://www.wallstreetb2b.net/test1se.html
    http://www.wallstreetb2b.net/test2se.html

    I’m setting up variables in page 1 and try to access same in page 2. But it doesn’t work. Please let me know if you find any issue in these files.

    Thank you
    Harsh Shah