Discover Mountain Biking - UserData Tutorial

A Tutorial in the use of Internet Explorer's userData - the Super Cookie!

For a recent programming project I found it useful to persist data short term with cookies. Or more accurately, it would have been useful if a cookie could hold more than 4k. The user didn't want to have to do anything at all to save data, access data or delete stale records aside from typing a record name and hit Save, or look at a drop down list of saved record names and hit Load. Stale records needed to disappear on their own. And there was another stipulation, it would be nice if nothing ever actually went to the server at all. That's right, the goal was to serve up a template from the server and have all data gathering, intelligent processing and data storage take place 100% on the client. Obviously we are looking at a lot of javascript here, but what about the storage problem?

No server side execution means databases are out. What is left? How about using the file system object to read and write files on the client computer. That's possible, but it is generally considered intrusive and there is the remaining problem of auto-deleting stale records.

You see why I decided I needed a cookie type object? Simple to read / write / update / auto-expire. But the 4k limit was not good. I spent hours searching the net for my answer. There was one possibility called userData. userData under the right circumstances can hold up to 512K per web page and 10M per domain! Incredible! It functions like a cookie in that a web page merely invokes a few commands and data can be written to the browser cache as an XML document completely unbeknownst to the user, and the data persists through re-boots and temp folder deletions. Further, userData can be auto-expired just like a cookie. It's a Super Cookie! The limitation is that userData is a behavior only available in Internet Explorer. Well, that is the most common browser in the world whether I use it or not. And in this case, it was easy to say all users would be on IE. Here is what Microsoft has to say about userData. Click here.

Okay. I had my Super Cookie. Now to learn the examples and here we go! Oh rats. The example is so simplistic that it is worthless. Now who would have expected that from MS? Not me. Nope, never. MS's example only demonstrates setting attributes within the root stub. If you haven't studied XML you probably don't know what that means and neither did I. I certainly had a lot jargon to learn to get up to par on this one. Here is a MS type example of what an XML document looks like given a single attribute:
<rootstub name="bob" />

And that's it. That's the sophistication level of MS examples. Here is how you can create similar results. Enable the userData behavior by adding the following lines to your html page. ASP not necessary as this is an html behavior!
<style>
.userData {behavior:url(#default#userData);}
</style>

And then you'll need a function to save userdata and a function to load userData in javascript.
<script>
function saveUserData(){
var fdata = form.text1;
fdata.setAttribute("name",fdata.value);
fdata.save("mydata");
}

The function name is saveUserData. We assign the object form object text1 to variable fdata. We then set a rootstub attribute "name" and give it fdata.value or the value of the text field. You can use ANY name in place of mydata. That is simply the name of the xml file that will be stored on the client's browser. On to Load.
function loadUserData(){
var fdata = form.text1;
fdata.load("mydata");
fdata.value = fdata.getAttribute("name");
}
</script>

The function is called loadUserData. We set variable fdata to the form object text1. We load the userdata stored in mydata and reset the form field text1 value by using the getAttribute command. And finally here is the form.
<body>
<form id="form">
<input class="userData" type="text" id="text1">
<input type="button" value="Save" onclick="saveUserData()">
<input type="button" value="Load" onclick="loadUserData()">
</form>
</body>

Notice I invoke the behavior by calling it in the input tag where the text field is. Actually, I don't do it this way but we're showing a simple example, right? Type something in the box and hit Save. Then blank the text field and hit Load. It'll come right back. In fact, reboot your computer or wipe your cache, it'll always still be there because we didn't set it to expire. Oops! Something MS forgot to put in their examples. By the way, here is the entire working script if you don't want to type it in to see it work. Feel free to grab the entire code and play with it yourself. (If you want to look at the XML on your computer, I can only help with Win2K. It's located on the drive where you operating system is installed, under Documents and Settings, within the folder which represents your own user that logs into the PC, then under Application Data/Microsoft/Internet Explorer/User Data. There you'll find four folders composed of random letters. The browser randomly puts userData in these folders. Look through them and see what is there!)

But what if you wanted something that was actually useful, such as an age and weight associated with multiple names? Well, you can't really do that with MS's example, but you could modify it all a bit and end up with an xml structure like this:
<rootstub name1="bob" age1="17" weight1="110" name2="joe" age2="11" weight2="60" />

and this is perfectly acceptable XML. And if you worked at it you could parse out the information for each name. This still isn't very useful in real-world situation. What if you needed dozens of bits of information about each person and you wanted a dropdown list of each name to select from? Clearly MS's example left a great deal to be desired.

That's our content for the second part of this article. If you're ready to move on, the next article is nearly complete. Check back in a few days.