HTML and CSS Reference
your users. If you need more complex information stored as part of the
history, a better approach would be to use the hash as a key to pull fur-
ther state information out of some store. Although you could roll your
own approach to this, HTML5 has provided an API to do it for you
through the history.pushState() method and the popstate event. These
methods allow you to save and reload a complex object.
Example: Implementing an undo feature
The next example extends the content-editable example ch05/content-
editable-5.html from the earlier section to include an undo feature. You
can see the full listing in ch05/history-1.html. Here's how it works.
When the page is first loaded,
an initial state is created and
tagged in the URL with the
hash undo0 .
If the user makes a change in
the text and then clicks the
Save button, a new undo
state is created and assigned
to the hash undo1 .
Clicking the Undo button or
clicking the Back button in
the browser returns the page
to the previous state.