HTML and CSS Reference
In-Depth Information
1
The user arrives at the Click
Me page as before.
2
Notice that now the URL is
updated after every click—
“#3” has appeared at the end
of it.
3
Clicking the Back button now
takes the location back to #2,
demonstrating that page states
have successfully been added
to the history. But note that
clicking the Back button
doesn't automatically return
the page to its previous state.
Updating page state
Updating the history is only part of the problem; you also need to be
able to update the state of the page to match the state in the history.
Because you're the one managing the history, it's up to you to manage
the page state. In order to update your page in response to
location.hash
being changed, you can listen to the
hashchange
event:
function doclick() {
times++;
location.hash = times;
}
window.onhashchange = function() {
if (location.hash.length > 0) {
times =
parseInt(location.hash.replace('#',''),10);
} else {
times = 0;
b
Update times;
change hash
c
hashchange
event
d
Check that
hash exists
e
Set times
value
