How to Write a Cookie-less Session Library for JavaScript

    Craig Buckler
    Share

    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: