How to Write a Cookie-less Session Library for JavaScript
In 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:
- JavaScript session variables demonstration page
- Full JavaScript session.js code
- Download full code in a ZIP file
See also:
