Skip to main content

How to Write a Cookie-less Session Library for JavaScript

By Craig Buckler



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

the (JavaScript) Cookie MonsterIn my previous post, Cookie-less Session Variables in JavaScript, we discovered how JavaScript session data could be saved to the 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;

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

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 ‘’. 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 property is parsed but, if that is not available, ‘store’ is set to an empty object.

	// save store on page unload
	function Save() { = 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 created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!