HTML5 History API provides pushState() and replaceState() methods that can be used to add and modify the browser history entries without page reload, respectively.

Note that the History API only allows updating same-origin URLs. You cannot use it to navigate to an entirely different website.

pushState() method

The pushState() method allows you to update the URL and create a new entry in the browser history without reloading the page.

Here is how it looks like:

history.pushState(state, title, url)

The state is an object containing some data related to the new URL. It can be retrieved using JavaScript history.state property.

The title is the new page title that the browser should display. However, it is sometimes completely ignored by the browser.

Finally, the url is the new URL that you want to add to the browser history without reloading the page.

Here is an example:

history.pushState({
    id: 'homepage',
    source: 'JS'
}, 'Explore Proptips', 'https://protips.io')

replaceState() method

The replaceState() is another useful method that can be used to update the URL without reloading the page. It works exactly the same way as pushState(), but replaces the existing browser history entry instead of adding a new one.

Ideally, you should use this method only when you want to change the URL without leaving any trace in browser history:

history.replaceState({
    id: 'JS Tutorials',
    source: 'JS'
}, 'Explore JavaScript Tips', 'https://protips.io/js/')