History API: The `popstate` event

This event is called on window every time the active history state changes, with the current state as the callback parameter:

window.onpopstate = event => {
  console.log(event.state)
}

or

window.addEventListener('popstate', event => {
  console.log(event.state)
})

will log the new state object (the first parameter passed to pushState or replaceState) every time you call history.back(), history.forward() or history.go().

Lessons in this unit:

0: Introduction
1: Navigating the history
2: Add an entry to the history
3: Modify history entries
4: Access the current history entry state
5: ▶︎ The `popstate` event
6: The `hashchange` event
Want to learn more? Check out our courses