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:
- Getting started with localStorage vs sessionStorage in html5
- pseudo elements vs pseudo classes
- What are reflows and repaints and how to avoid them
- A simple requestAnimationFrame example visually explained