Using Internet Explorer's userData behavior to store data on the client.

Sunday, April 10, 2011 Posted by Ruslan Matveev

Internet Explorer is bad. And it doesn't get any better, because everything that we had to fight against in IE6 still raises issues in the next versions. A couple of months ago I've came across some strange and dark part of IE's past, called: behaviors. Behaviors are proprietary components that encapsulate specific functionality or behavior on a page and according to the Microsoft they represent one of the most exciting new features introduced in Microsoft Internet Explorer 5.5

Nice! Why I didn't know about it before?! You can use their own programming language to implement those behaviors (it's simple, XML - based and component - oriented language), and you're probably familiar with it, because every time when you needed to fix png bugs in old IE6 you had to include that weird htc file, which contains behavior definition.

But, there is another part, called default behaviors, which is always available out of the box, and you don't need to load external files if you want to use them. You can find full list of built - in behaviors here, and I'm going to tell you about one of them, called userData behavior, which is in my opinion, one of the most interesting ones listed in there.

According to the documentation, userData behavior "The userData behavior persists information across sessions by writing to a UserData store. This provides a data structure that is more dynamic and has a greater capacity than cookies. The capacity of the UserData store depends on the security zone of the domain. The following table shows the maximum amount of UserData storage that is available for an individual document and also the total available for an entire domain, based on the security zone.".

What the fuck?! Did Microsoft invent HTML5 client storage predecessor in Internet Explorer 5.5 more than 11 years ago? Let's check it together. First of all we need to make use of this behavior, by attaching it to some html element using following CSS:

#userData {
        display
: none;
        BEHAVIOR
: url(#default#userdata);
}

After that our HTML element will inherit couple of methods from userData behavior, that we can use to load and save the data. Each of this methods accepts string as an argument, that represents a "key" that will be used to save / load data. Here is the example from Microsoft:

<head>
       
<style>
               
.userData {
                        behavior
:url(#default#userdata);
               
}
       
</style>
       
<script>
               
function fnLoad() {
                        oPersistInput
.load("oDataStore");
                        oPersistInput
.value=oPersistInput.getAttribute("sPersistAttr");
               
}
               
function fnSave() {
                        oPersistInput
.setAttribute("sPersistAttr",oPersistInput.value);
                        oPersistInput
.save("oDataStore");
               
}
       
</script>
</head>
<body>
       
<input type="text" class="userData" id="oPersistInput" />
       
<input type="button" value="Load Attribute" onclick="fnLoad()" />
       
<input type="button" value="Save Attribute" onclick="fnSave()" />
</body>

VoilĂ  we have data stored in Internet Explorer storage, so now if you'll have some time, you can probably build some cool fallback for HTML5 storage mechanism form Microsoft browsers on top of it. Live demo (you can only see it if you've got IE):

Links:

 

Post a Comment