HTML and CSS Reference
In-Depth Information
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.
1
When the page is first loaded,
an initial state is created and
tagged in the URL with the
hash
undo0
.
2
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
.
3
Clicking the Undo button or
clicking the Back button in
the browser returns the page
to the previous state.