History API

The History API lets you interact with the browser history, trigger the browser navigation methods and change the address bar content.

It’s especially useful in combination with modern Single Page Applications, on which you never make a server-side request for new pages, but instead the page is always the same: just the internal content changes.

A modern JavaScript application running in the browser that does not interact with the History API, either explicitly or at the framework level, is going to be a poor experience to the user, since the back and forward buttons break.

Also, when navigating the app, the view changes but the address bar does not.

And also the reload button breaks: reloading the page, since there is no deep linking, is going to make the browser show a different page

The History API is available on the window object, so you can call it like this: window.history or history, since window is the global object.

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