Be the first user to complete this post
|
Add to List |
Managing the browser navigation history using HTML 5 pushstate and popstate
Background
Methods
HTML 5 exposes a history property on the window object. There are 5 main methods on this object.
All of these methods are per document. i.e. If you navigate from http://mysite.com
to http://google.com
, mysite.com will have have its own history object that it maintains and google.com will have its own.
Connecting the dots
The syntax for invoking the pushstate function is as follows
history.pushState('stateDataString', 'an unused arg', 'url of your state');
http://mysite.com/foo.html
history.pushState( '{"somekey":"somevalue"}', ' ' , '/bar.html' );
http://mysite.com/bar.html
http://google.com
http://mysite.com/bar.html
window.addEventListener("popstate", function(e) {
console.log(JSON.parse(history.state));
});
References
Also Read:
- pseudo elements vs pseudo classes
- Remove the blank value from a html select option dropdown
- window.onload vs document.onload
- Getting started with localStorage vs sessionStorage in html5
- A simple requestAnimationFrame example visually explained