在例子代码中，我们只想在第一次页面装载的时候加入历史事件，如果用户在第一次装载后，按回退按钮返回页面，我们就不想重新加入任何历史事件。
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);
让我们继续使用historyStorage 类。类似dhtmlHistory ，historyStorage通过一个叫historyStorage的单一全局对象来显示他的功能，这个对象有几个方法来伪装成一个hash table, 象put(keyName, keyValue), get(keyName), and hasKey(keyName).键名必须是字符，同时键值可以是复杂的javascript对象或者甚至是xml格式的字符。在我们源码source code的例子中，我们put() 简单的XML到historyStorage 在页面第一次装载时。
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.）
文章来源于领测软件测试网 https://www.ltesting.net/
