The use of cookies on the net is widely know and often used without any real need. Internet Explorer 5.0 introduced other ways than cookies to store a small amount of data on the client machine. However there is no general easy way to persist a property and the developer has to manually save and load the data and update the DOM tree to reflect the old state. The persist behavior addresses this and makes it really easy to persist an attribute or a style property of an element between different sessions.

Persist Behavior

The persist behavior adds two custom attributes to the element. The first one is called persist and the value of this should be a comma separated list of the attributes and style properties that should be persisted across the sessions.

<div id="persist-div" persist="foo, style.left, style.top"
   foo="Original foo attribute">...</div>

Notice how the style properties are defined in the list using style.propertyName.

The second custom attribute is called dataSourceId. This attribute can be used to share the persisted data between different elements and different documents. If this attribute is not present the id (as well as the document file name) attribute is used to make sure that the data is unique for each element.

<div persist="foo, style.left, style.top" dataSourceId="shared-data"
   foo="Original foo attribute">...</div>

You can also use path names in the dataSourceId if you want different elements at different paths to share the attributes.

<div persist="foo, style.left, style.top" dataSourceId="/shared-data"
   foo="Original foo attribute">...</div>

The behavior also defines one method called deleteSavedData which clears all the data used to persist the attributes.

var el = document.getElementById("persist-div");
el.deleteSavedData();

Usage

All you need to use this behavior is to attach the persist behavior to the element. This can be done in a css file, style block or an inline style declaration (as well as other ways).

<style type="text/css">
#persist-div {
   behavior: url("persist.htc;");
}
</style>

<div style="behavior: url('persist.htc');">...</div>

Implementation

UserData Behavior

This behavior is implemented using the built in behavior called userData to store the data. The userData behavior allows an XML document to be stored between sessions. The userData behavior adds a few methods that allows you to save key-value pairs as well as a property to access the actual XML document. To store and restore the XML document the save and load methods must be called manually.

When the element is ready for interaction the behavior checks if there is any data stored from previous sessions and if there is then this data is used to restore the values of the persisted attributes. The behavior also attaches an event listener to the onpropertychange event to get a notification about every property change and if the property is supposed to be persisted it saves the new value.

Persist Behavior
Demo
Demo 2
Generic Move Demo
Download

Author: Erik Arvidsson