window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.addListener(historyChange);
// if this is the first time we have
// loaded the page...
if (dhtmlHistory.isFirstLoad()) {
debug("Adding values to browser "
+ "history", false);
// start adding history
dhtmlHistory.add("helloworld",
"Hello World Data");
dhtmlHistory.add("foobar", 33);
dhtmlHistory.add("boobah", true);
var complexObject = new Object();
complexObject.value1 =
"This is the first value";
complexObject.value2 =
"This is the second data";
complexObject.value3 = new Array();
complexObject.value3[0] = "array 1";
complexObject.value3[1] = "array 2";
dhtmlHistory.add("complexObject",
complexObject);
// cache some values in the history
// storage
debug("Storing key 'fakeXML' into "
+ "history storage", false);
var fakeXML =
'<?xml version="1.0" '
+ 'encoding="ISO-8859-1"?>'
+ '<foobar>'
+ '<foo-entry/>'
+ '</foobar>';
historyStorage.put("fakeXML", fakeXML);
}
然后，如果用户从这个页面漂移走(导航走)又通过返回按钮返回了，我们可以用get()提出我们存储的值或者用haskey()检查他是否存在。
window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();
// subscribe to DHTML history change
// events
dhtmlHistory.addListener(historyChange);
// if this is the first time we have
// loaded the page...
if (dhtmlHistory.isFirstLoad()) {
debug("Adding values to browser "
+ "history", false);
// start adding history
dhtmlHistory.add("helloworld",
"Hello World Data");
dhtmlHistory.add("foobar", 33);
dhtmlHistory.add("boobah", true);
var complexObject = new Object();
complexObject.value1 =
"This is the first value";
complexObject.value2 =
"This is the second data";
complexObject.value3 = new Array();
complexObject.value3[0] = "array 1";
complexObject.value3[1] = "array 2";
dhtmlHistory.add("complexObject",
complexObject);
// cache some values in the history
// storage
debug("Storing key 'fakeXML' into "
+ "history storage", false);
var fakeXML =
'<?xml version="1.0" '
+ 'encoding="ISO-8859-1"?>'
+ '<foobar>'
+ '<foo-entry/>'
+ '</foobar>';
historyStorage.put("fakeXML", fakeXML);
}
// retrieve our values from the history
// storage
var savedXML =
historyStorage.get("fakeXML");
savedXML = prettyPrintXml(savedXML);
var hasKey =
historyStorage.hasKey("fakeXML");
var message =
"historyStorage.hasKey('fakeXML')="
+ hasKey + "<br>"
+ "historyStorage.get('fakeXML')=<br>"
+ savedXML;
debug(message, false);
}
prettyPrintXml() 是一个第一在例子源码full example source code中的工具方法。这个方法准备简单的xml显示在web page ，方便调试。
注意数据只是在使用页面的历史时被持久化，如果浏览器关闭了，或者用户打开一个新的窗口又再次键入了ajax应用的地址，历史数据对这些新的web页面是不可用的。历史数据只有在用前进或回退按钮时才被持久化，而且在用户关闭浏览器或清空缓存的时候会消失掉。想真正的长时间的持久化，请看Ajax MAssive Storage System (AMASS).
我们的简单示例已经完成。演示他(Demo it)或者下载全部的源代码(download the full source code.)
示例2
我们的第2个例子是一个简单的模拟ajax email 应用的示例，叫O'Reilly Mail,类似Gmail. O'Reilly Mail描述了怎样使用dhtmlHistory类去控制浏览器的历史，和怎样使用historyStorage对象去缓存历史数据。
O'Reilly Mail 用户接口(user interface)有两部分。在页面的左边是一个有不同email文件夹和选项的菜单，例如 收件箱，草稿，等等。当一个用户选择了一个菜单项，比如收件箱，我们用这个菜单项的内容更新右边的页面。在一个实际应用中，我们会远程取得和显示选择的信箱内容，不过在O'Reilly Mail里，我们简单的显示选择的选项。
O'Reilly Mail使用Really Simple History 框架向浏览器历史里加入菜单变化和更新地址栏，允许用户利用浏览器的回退和前进按钮对应用做书签和跳到上一个变化的菜单。
我们加入一个特别的菜单项，地址簿，来描绘historyStorage 能够怎样被使用。地址簿是一个由联系的名字电子邮件和地址组成的javascript数组，在一个真实的应用里我们会取得他从一个远程的服务器。不过，在O'Reilly Mail里，我们在本地创建这个数组，加入几个名字电子邮件和地址，然后把他们存储在historyStorage 对象里。如果用户离开了这个web页面以后又返回的话，O'Reilly Mail应用重新从缓存里得到地址簿，胜过(不得不)再次访问远程服务器。
地址簿是在我们的初始化initialize()方法里存储和重新取得的