|
Internet Explorer 5.0 introduces userData, a Behavior that enables the user to control save and load operations. The Behaviors introduced so far, all suffer from the deficiency that the acts of saving and loading the data are controlled by the browser. saveFavorite saves the page when you add it to your Favorites. saveHistory saves the page when you load a different page. saveSnapshot saves the data when you enter data into a form field. userData, on the other hand, saves the data when you program it to do it, as we explain below. Let's practice it a little so you understand the power behind it.
Play 3-4 turns again. Click the Save button and quit the browser. Open a fresh window of Internet Explorer 5.0, with our Column 24. Click the link above again. You will find your Connect Three game in exactly the same shape you left it. Let's conduct another experiment. Play 3-4 turns again. Click the Save button. Play 2 more turns. Click the Load button. Your game board will return to its state before you saved it. You've just witnessed the power of the userData Behavior. Notice that you did not have to specify any file name for the page to be saved. We explain next how to use it.
There are a few changes you have to implement in your Web page to be able to use the persistence Behaviors. First, you have to add the following META tag:
<META NAME="save" CONTENT="userdata">
Secondly, you need to define the userData Behavior as a built-in one:
<STYLE>
.userData{behavior:url(#_IE_);}
</STYLE>
The rest of the changes are identical to those made for Favorites persistence. We want to persist the whole game board by persisting
the BODY tag. In order to enable a persistent element, you need to specify its Behavior via the CLASS attribute, and assign an ID to the element. In our case of the BODY tag, the HTML statement looks like this:
<BODY CLASS="saveHistory" ID="game">
Notice we don't have any event handlers here for saving and loading the data. These acts are being done explicitly in the page. We chose to implement the save and load operations by buttons that the user can control:
<FORM>
<INPUT TYPE="button" VALUE="Load" onclick="handleBodyLoad()">
<INPUT TYPE="button" VALUE="Save" onclick="handleBodySave()">
</FORM>
The handleBodyLoad() and handleBodySave() functions are almost identical to those implemented for the saveFavorite Behavior. The handleBodySave() function includes one more line that does the actual saving:
function handleBodySave() {
for( var i = 1; i <= 3; i++)
for( var j = 1; j <= 3; j++) {
game.setAttribute("box" + i + j + "srcPersistAttr",
eval("box" + i + j + ".src")); // join with previous line
game.setAttribute("grid" + i + j + "PersisitAttr", grid[i][j]);
}
game.save("gamePersistentInfo");
}
The save() method expects a string as its parameter which identifies the hierarchical information saved. We intentionally skip the issue of how is the data saved, except that it is an XML-object-based. We will cover XML in a future column. For the purpose of persistence, the mechanics of how is it being done is transparent to the Web page author.
The handleBodyLoad() function includes one more line for loading the game data:
function handleBodyLoad() {
game.load("gamePersistentInfo");
for( var i = 1; i <= 3; i++)
for( var j = 1; j <= 3; j++) {
if (game.getAttribute("box" + i + j + "srcPersistAttr"))
eval("box" + i + j + ".src = game.getAttribute('box"
+ i + j + "srcPersistAttr')"); // join with previous line
if (game.getAttribute("grid" + i + j + "PersisitAttr"))
grid[i][j] = game.getAttribute("grid" + i + j + "PersisitAttr");
}
}
  
| 
