The popstate event

Learn to catch the popstate event fired on back/forward navigation.

The popstate event

When the user clicks the back or forward button (or code calls history.back()), the browser fires a popstate event. You listen for it on window.

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

event.state holds the state object of the new active entry, if any. pushState and replaceState do not fire this event; only back or forward navigation does.

Listening and state

Inside a popstate listener you read event.state to access the state of the new active entry. In SPAs this is used to restore the view during back or forward navigation.

window.addEventListener('popstate', (event) => {
  if (event.state) {
    render(event.state.path);
  }
});

On the first load event.state is usually null, so checking first is a good habit.

Exercise Add a popstate listener

Add a 'popstate' event listener to the window object. The listener should be an arrow function that logs event.state with console.log.

Show example solution

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

Test yourself

Match the popstate concepts

popstate

back or forward event
event.state

the entry state
pushState

does not fire popstate
window

the event target

Add a popstate listener

____, (event) => { console.log(event.state); });

Show answer

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

When does the popstate event fire?
- When pushState is called
- When replaceState is called
- When the page first loads
- When the back or forward button is pressed
Show answer

When the back or forward button is pressed — Correct! popstate fires on back or forward navigation.

Next lesson: SPA routing basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies