AJAX: How to Handle Bookmarks and Back Buttonsby Brad Neuberg
"AJAX: How to Handle Bookmarks and Back Buttons" explains the significant issues that AJAX applications currently face with bookmarks and the back button; presents the Really Simple History library, an open source framework that solves these problems; and provides several working examples.
Bookmarks and the back button work great for traditional, multi-page web applications. As users surf websites, their browsers' location bars update with new URLs that can be pasted into emails or bookmarked for later use. The back and forward buttons also function correctly and shuffle users between the pages they have visited.
AJAX applications are unusual, however, in that they are sophisticated programs that live within a single web page. Browsers were not built for such beasts--they are trapped in the past, when web applications involved pulling completely fresh pages on every mouse click.
In such AJAX software as Gmail, the browser's location bar stays exactly the same as users select functions and change the application's state, making bookmarking into specific application views impossible. Further, if users press their back buttons to "undo" a previous action, they will find to their surprise that the browser completely leaves the application's web page.
The open source Really Simply History framework (RSH) solves these issues, bringing bookmarking and control over the back and forward buttons to AJAX applications. RSH is currently in beta and works with Firefox 1.0, Netscape 7+, and Internet Explorer 6+; Safari is not currently supported (for an explanation, see my weblog entry " Coding in Paradise: Safari: No DHTML History Possible").
Several AJAX frameworks currently exist to help with bookmarking and history issues; all of these frameworks, however, suffer from several important bugs due to their implementations (see " Coding in Paradise: AJAX History Libraries" for details). Further, many AJAX history frameworks are monolithically bundled into larger libraries, such as Backbase and Dojo; these frameworks introduce significantly different programming models for AJAX applications, forcing developers to adopt entirely new approaches to gain history functionality.
In contrast, RSH is a simple module that can be included into existing AJAX systems. Further, the Really Simple History library uses techniques to avoid the bugs that affect other history frameworks.
DhtmlHistory class provides a history
abstraction for AJAX applications. AJAX pages
history events to the browser, specifying new locations and
associated history data. The
updates the browser's current URL using an anchor hash, such as
#new-location, and associates history data with this
new URL. AJAX applications register themselves as history
listeners, and as the user navigates with the back and forward
buttons, history events are fired that provide the browser's new
location and any history data that was persisted with an
The second class, named
developers to store an arbitrary amount of saved history data. In
normal pages, when a user navigates to a new website, the browser
web page; if the user returns using the back button, all data is
HistoryStorage class solves this problem
through an API containing simple hash table methods such as
These methods allow developers to store an arbitrary amount of data
after the user has left a web page; when the user returns using the
back button, the data can be accessed through the
HistoryStorage class. We internally achieve this using
a hidden form field, taking advantage of the fact that browsers
autosave the values in form fields even after a user has left a