I’ve been writing a simple macro plugin for JavaScript (without the use of jQuery or any other frameworks) in order to learn more about the language (as well as build what I think to be a cool tool). I have already hit a few minor but itchy bumps and, while I suspect most of these issues are fairly common knowledge among experts in the community, I thought I’d discuss them anyway.
I (firstly) discovered that HTML5’s localStorage and sessionStorage don’t actually support the storage of objects. This makes sense in retrospect, since localStorage is only meant to offer a simple key - value store; however, it can be frustrating when attempting to persist complex data, especially since (for me) direct assignment seemed to be the most intuitive thing to do at the time. Silly me, with my assumptions.
The solution here was actually fairly straightforward:
sessionStorage.setItem("store", JSON.stringify(store));
Most browsers these days support JSON stringify() and parse(). For those who don’t know any better, these methods provide developers with the ability to serialize their objects/data structures, as well as go in the reverse direction. A fairly succinct article on JSONs can be found here. Be warned, though! You cannot use JSON.stringify() to serialize DOM nodes. We’ll come back to this later.
*Unrelated to the above, I also discovered this nifty little hack for browsers that don’t support local storage. Below, I use win.name (a remnant from the paleolithic era of web-development) to persist the data. Realistically, most modern browsers are built with local storage support and, while this solution isn’t quite ideal, I feel like it’s nice to have the support anyway.
var localStorageSupport =
(typeof(Storage)!=="undefined")? true : false;
var win = window.top || window;
var store = (localStorageSupport)?
(sessionStorage.getItem("store") ?
JSON.parse(sessionStorage.getItem("store")) : {})
:(win.name ? JSON.parse(win.name) : {});
My second issue stemmed from the fact that, while trying to store relevant data for replaying user actions, I found (of course) that I couldn’t serialize DOM nodes by stringifying them. Till relatively recently, there was no built-in solution to do this well at all - and due to the circular references that often occur inside the tree (child/parent relationships and what have you), JSON did not support dealing with it. If you tried to stringify a DOM node at all, you’d probably see something along the lines of “TypeError: Converting circular structure to JSON” in your console.
This isn’t to say that getting around the problem is terribly hard, especially now. Currently, there appears to be XMLSerializer support in most browsers. I checked it out by running the following
p = new XMLSerializer()
p.serializeToString(myVar._body)
and got back these results (at least for my simple page with a few buttons, a link, and a div):
Huzzah! Great! Yes? No? Unfortunately, it didn’t quite suit my purposes, since I wanted a nested associative array - and not a single giant-ass string - based on the structure. Not to say that they aren’t useful to have, but the XMLSerializer and DOMParser interfaces strike me as being relevant only in cases that saved DOM structures need to be re-assessed as an XML document. My solution was relatively quick to write using the existing DOM traversal functions; some really good info on node iteration and DOM tree traversals can be found here.
var XMLSerialize = function(node, output) {
output = (node.nodeName !== undefined)?
{ nodeName: node.nodeName } : {};
if(node.attributes !== null) {
for (var i = 0; i < node.attributes.length; i++) {
output[node.attributes[i].name] = node.attributes[i].value;
}
}
if (node.hasChildNodes()) {
output.children = [];
var i = 0;
for (var child=node.firstChild; child != null; child=child.nextSibling) {
if(child.nodeType == 1) {
output.children[i++] = this.XMLSerialize(child, output.children);
}
}
}
return output;
}
The object it returns works relatively well for me, and I am able to traverse it efficiently. By grabbing the nodeType on the child I was able to retain only element/tag children, since there are actually several node types a node itself can be. Here’s the full list of constants returned by nodeType.
Stringifying the XMLSerialize output of my document currently results in something that looks like the text below:
{"nodeName":"#document",
"children":[
{"nodeName":"HTML",
"children":[
{"nodeName":"HEAD",
"children":[
{"nodeName":"TITLE","children":[]},
{"nodeName":"LINK","type":"text/css","href":"static/css/style.css","rel":"stylesheet"},{"nodeName":"SCRIPT","type":"text/javascript","children":[]}
]
},
{"nodeName":"BODY",
"children":[
{"nodeName":"BUTTON","children":[]},
{"nodeName":"BUTTON","children":[]},
{"nodeName":"BUTTON","children":[]},
{"nodeName":"A","href":"","children":[]},
{"nodeName":"DIV","class":"panel","children":[]}
]
}
]
}
]
}
You know, instead of:
Lame.
Those have been my only issues so far, but as my terribly riveting adventure with JavaScript continues, I will be sure to write more captivating and emotionally wrought stories.
