replaceState

Learn to replace the current history entry with replaceState.

What is replaceState?

history.replaceState(state, unused, url) takes the same three parameters as pushState, but it does not add a new history entry. Instead, it updates the state and URL of the current entry.

history.replaceState({page: 'home'}, '', '/home');

The back button still goes to the previous entry, because replaceState overwrites the current entry rather than adding a new one.

pushState versus replaceState

Both methods change the URL and state, but they affect history differently.

history.pushState({page: 'a'}, '', '/a');
// history: [home, a]
history.replaceState({page: 'b'}, '', '/b');
// history: [home, b]

pushState adds a new entry; the back button goes to the previous entry. replaceState overwrites the current entry; no new entry is added to history.

Exercise Update the entry with replaceState

Assign 'settings' to a currentTab variable. Call history.replaceState with the state { tab: currentTab }, an empty title and the URL '/settings'.

Show example solution

const currentTab = 'settings';
history.replaceState({ tab: currentTab }, '', '/settings');

Test yourself

Complete the replaceState call

const state = { tab: 'settings' };
____;

Show answer

const state = { tab: 'settings' };
history.replaceState(state, '', '/settings');

When do you use replaceState instead of pushState?
- When you want to add a new history entry
- When you want to change the current entry and prevent the back button from adding a new one
- When you want to reload the page
- When you want to clear history entirely
Show answer

When you want to change the current entry and prevent the back button from adding a new one — Correct! replaceState updates the current entry instead of adding a new one.
pushState versus replaceState

pushState

adds a new entry
replaceState

changes the current entry
back button

goes to the previous entry
state object

data stored with the entry

Next lesson: The popstate event

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies