the (JavaScript) Cookie MonsterIn my previous post, Cookie-less Session Variables in JavaScript, we discovered how JavaScript session data could be saved to the window.name property. Today, we create a JavaScript library to exploit this property.

View the JavaScript session library demonstration page…

The code provides three main methods:

  • Session.set(name, object) — store a named session value/object
  • Session.get(name) — retrieve a named session value/object
  • Session.clear() — reset all the session data

Another Session.dump() method returns all the JSON-encoded session data. This would normally be used for debugging purposes only.

The JavaScript code is loaded just before the closing body tag. First, we load the JSON library:


<script type="text/javascript" src="json-serialization.js"></script>

The JSON library provides cross-browser serialization methods that are required by our Session library. For more information, refer to Cross-browser JSON Serialization in JavaScript.

The session.js file is loaded next. This is stand-alone code that can be implemented in any system — it does not depend on jQuery or any other JavaScript library. Working through the code:


 if (JSON && JSON.stringify && JSON.parse) var Session = Session || (function() {

	// window object
	var win = window.top || window;

	// session store
	var store = (win.name ? JSON.parse(win.name) : {});

The first line defines our Session module. However, it will only be defined if the JSON library has been loaded and there are no other conflicting Session variables or functions.

The second line sets win to ‘window.top’. It is set to ‘window’ if that is not available (perhaps if the browser does not support frames).

Next, we define a ‘store’ object to hold all our session data. Exisiting JSON-encoded data in the window.name property is parsed but, if that is not available, ‘store’ is set to an empty object.


	// save store on page unload
	function Save() {
		win.name = JSON.stringify(store);
	};

	// page unload event
	if (window.addEventListener) window.addEventListener("unload", Save, false);
	else if (window.attachEvent) window.attachEvent("onunload", Save);
	else window.onunload = Save;

The private Save() function assigns the serialized the ‘store’ object string to the window .name property. The following three lines define a cross-browser event which calls the Save function when the page is unloaded. Your pages can therefore modify the ‘store’ as much as necessary, but the heavy work of serializing and saving only occurs at the last possible moment.


	// public methods
	return {

		// set a session variable
		set: function(name, value) {
			store[name] = value;
		},

		// get a session value
		get: function(name) {
			return (store[name] ? store[name] : undefined);
		},

		// clear session
		clear: function() { store = {}; },

		// dump session data
		dump: function() { return JSON.stringify(store); }

	};

 })();

Finally, we have our four public set, get, clear and dump functions which handle the store object accordingly. The Session.get() method will return a JavaScript ‘undefined’ value if a session name can not be found.

I hope you find the code useful. Feel free to use it in your own projects.

Useful resources:

See also:

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • kylefarris

    That’s actually pretty interesting. Would have never thought of it. Learn something new every day, I guess…

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.