History API: Add an entry to the history

Using pushState() you can create a new history entry programmatically. You pass 3 parameters.

The first is an object which can contain anything (there is a size limit however, and the object needs to be serializable).

The second parameter is currently unused by major browsers, so you generally pass an empty string.

The third parameter is a URL associated to the new state. Note that the URL needs to belong to the same origin domain of the current URL.

const state = { foo: 'bar' }
history.pushState(state, '', '/foo')

Calling this won’t change the content of the page, and does not cause any browser action like changing window.location would.

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