Simple Example of Using the Browser's History API

This little History API demo hooks in to the browser button. We ran it using the the Firefox Developer Console. The demo does three things:

  1. Adds an onpopstate = (e) => console.log(e.state) event handler.
  2. Invokes history.pushState(state, title) three times.

When we then clicked the browser's back button three times.

  1. the current page did not change,
  2. the url did not change, and
  3. the event handler surfaced the history state.

This is a handy way to let users navigate (partial) page changes with the browser's back/forward buttons. This is important, because most users don't have clue about whether a page change was partial or not.