Augmenting DOM Storage with IE's userData behavior

http://www.javascriptkit.com/javatutors/domstorage2.shtml

Augmenting DOM Storage with IE's userData behavior

As mentioned on the previous page, when it comes to IE, DOM Storage (sessionStorage and localStorage) is supported in IE8+. This leaves IE7 and IE6, still a formidable force on the internet depending on which survey you refer to, out in the cold. Depending on the task and your intended audience, that may be unacceptable. Fortunately, IE does actually support a proprietary feature that acts similarly to DOM Storage in terms of storage space, and that's IE's userData Behavior. Used in conjunction with DOM Storage, you can extend the guest list to your mega storage area to the lesser IE versions as well. IE userData behavior is supported in IE5+, and lets you persist up to 1MB of data per domain. Granted it's not quite the capacity of DOM Storage (4MB), but certainly a huge improvement over the miserly 4KB of space offered by JavaScript cookies.

IE's userData behaviour works as follows- you give the element in which you wish its data to be persisted a userData behavior (using either inline or external CSS), then call the appropriate userData methods of the element to save/retrieve that info:

IE userData Behavior

Methods	Description
getAttribute(attr)	Returns the persisted value stored inside the specified attribute of an element.
load(name)	Loads an object containing the persisted values of a particular userData behavior.
removeAttribute(attr)	Removes the specified attribute from an element and its persisted value
save(name)	Saves an object containing the persisted values of a particular userData behavior.
setAttribute(attr, value)	Stores a value to be persisted inside the specified attribute of an element.
properties
expires	Gets or sets the expiration date of the data persisted with the userData behavior.
XMLDocument	Returns a reference to the XML Document of the persisted object.

The best way to wrap your head around userData is just to see it in action- the following recreates the example on the previous page of persisting contents typed into a TEXTAREA in the event of an accidental browser refresh so it works in IE6 and IE7 as well:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<form> <textarea id="feedback" style="width:350px;height:200px" style="behavior:url('#default#userData')"></textarea><br /> <input type="button" value="Click to Hard Reload Page" onClick="location.reload(true)" /> </form>   <script type="text/javascript">   var feedbackarea=document.getElementById("feedback") if (window.sessionStorage){     if (sessionStorage.feedbackdata){ //if there is data stored for the target textarea     feedbackarea.value=sessionStorage.feedbackdata //recall it upon refresh or crash     }     feedbackarea.onkeyup=function(e){         sessionStorage.feedbackdata=this.value //save contents of textarea as user types     } } else if (feedbackarea.addBehavior){     feedbackarea.load("feedbackpersist") //load data if any persisted inside userData object "feedbackpersist"     if (feedbackarea.getAttribute("feedbackattribute")){ //if there is persisted data founded inside attribute "feedbackattribute"         feedbackarea.value=feedbackarea.getAttribute("feedbackattribute") //recall it upon refresh or crash     }     feedbackarea.onkeyup=function(e){         feedbackarea.setAttribute("feedbackattribute", this.value) //save contents of textarea into attribute "feedbackattribute" as user types     feedbackarea.save("feedbackpersist") //save state of feedback textarea into userData object "feedbackpersist"     } }   </script>

Demo (FF3.5+, Chrome4+, Safari4+, Opera10.5+, or IE6+):

Lets go through the important points:

• The element you wish to store userData to must be given a CSS Behavior, whether via inline or external CSS: behavior:url('#default#userData')
• To check whether the browser supports the userData Behavior, you can run a check for the addBehavior() method on an element (ie: if (feedbackarea.addBehavior){...})
• Call element.load(name) first when you wish to access any information stored inside one of the element's attributes.
• Call element.getAttribute(attr) to actually access the information inside a given attribute.
• Call element.setAttribute(attr, value) to store and persist any value you wish as an attribute of a given element.
• Call element.save(name) at the end after you have saved all information into any attributes of the element to actually save this information across sessions.

Note that in the above example, the contents persisted using userData lasts indefinitely, unlike the sessionStorage portion, which is just, naturally, session only. For the former, you can modify its expires property to change the duration of the persistence.

• Going beyond cookies- Using DOM sessionStorage and localStorage to persist larger amounts of info
• Augmenting DOM Storage with IE's userData Behavior