一个开发者使用add()方法加入历史事件。加入一个历史事件包括根据历史的改变指定一个新的地址，就像"edit:SomePage"标记, 还提供一个事件发生时可选的会被存储到历史数据historyData值.
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);
在add()方法被调用后，新地址立刻被作为一个锚值显示在用户的浏览器的URL栏里。例如，一个AJAX web页面停留在http://codinginparadise.org/my_ajax_app，调用了dhtmlHistory.add("helloworld", "Hello World Data" 后，用户将在浏览器的URL栏里看到下面的地址
http://codinginparadise.org/my_ajax_app#helloworld
然后他们可以把这个页面做成书签，如果他们使用这个书签，你的AJAX应用可以读出#helloworld值然后使用她去初始化web页面。Hash里的地址值被Really Simple History框架显式的编码和解码（URL encoded and decoded） （这是为了解决字符的编码问题）
对当AJAX地址改变时保存更多的复杂的状态来说，historyData比一个更容易的匹配一个URL的东西更有用。他是一个可选的值，可以是任何javascript类型，比如Number, String, 或者 Object 类型。有一个例子是用这个在一个多文本编辑器（rich text editor）保存所有的文本，例如，如果用户从这个页面漂移（或者说从这个页面导航到其他页面，离开了这个页面）走。当一个用户再回到这个地址，浏览器会把这个对象返回给历史改变侦听器（history change listener）。
开发者可以提供一个完全的historyData 的javascript对象，用嵌套的对象objects和排列arrays来描绘复杂的状态。只要是JSON (JavaScript Object Notation)允许的那么在历史数据里就是允许的，包括简单数据类型和null型。DOM的对象和可编程的浏览器对象比如XMLHttpRequest ，不会被保存。注意historyData 不会被书签持久化，如果浏览器关掉，或者浏览器的缓存被清空，或者用户清除历史的时候，会消失掉。
使用dhtmlHistory 最后一步，是isFirstLoad() 方法。如果你导航到一个web页面，再跳到一个不同的页面，然后按下回退按钮返回起始的网站，第一页将完全重新装载，并激发onload事件。这样能产生破坏性，当代码在第一次装载时想要用某种方式初始化页面的时候，不会再刷新页面。isFirstLoad() 方法让区别是最开始第一次装载页面，还是相对的，在用户导航回到他自己的浏览器历史中记录的网页时激发load事件，成为可能。
文章来源于领测软件测试网 https://www.ltesting.net/
