AJAX: How to Handle Bookmarks and Back Buttons
Pages: 1, 2, 3, 4, 5, 6

In the example code, we only want to add history events the first time a page has loaded; if the user presses the back button to return to the page after it has loaded, we do not want to re-add all of the history events:

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);

Let's move on to using the historyStorage class. Like dhtmlHistory, historyStorage exposes its functionality through a single, global object named historyStorage. This object has several methods that simulate a hash table, such as put(keyName, keyValue), get(keyName), and hasKey(keyName). Key names must be strings, while key values can be sophisticated JavaScript objects or even strings filled with XML. In our example source code, we put() simple XML into historyStorage the first time the page is loaded:

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);
  } 

Afterwards, if the user navigates away from the page and then returns via the back button, we can extract our stored value using the get() method or check for its existence using 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() is a utility method defined in the full example source code; this function prepares the simple XML to be displayed to the web page for debugging.

Note that data is only persisted in terms of this page's history; if the browser is closed, or if the user opens a new window and types in the AJAX application's address again, this history data is not available to the new web page. History data is only persisted in terms of the back and forward buttons, and disappears when the user closes the browser or clears the cache. For true, long-term persistence, see the Ajax MAssive Storage System (AMASS).

Our simple example is now finished. Demo it or download the full source code.

Pages: 1, 2, 3, 4, 5, 6

Next Page