How do you use `window.history` API?
TL;DR
The window.history
API allows you to manipulate the browser's session history. You can use history.pushState()
to add a new entry to the history stack, history.replaceState()
to modify the current entry, and history.back()
, history.forward()
, and history.go()
to navigate through the history. For example, history.pushState({page: 1}, "title 1", "?page=1")
adds a new entry to the history.
Using the window.history
API
The window.history
API provides methods to interact with the browser's history stack. This can be useful for single-page applications (SPAs) where you want to manage the URL and browser history without causing a full page reload.
Methods
history.pushState()
This method adds a new entry to the history stack.
history.pushState({ page: 1 }, 'title 1', '?page=1');
- The first parameter is a state object associated with the new history entry.
- The second parameter is the title of the new history entry (currently ignored by most browsers).
- The third parameter is the URL to be displayed in the address bar.
history.replaceState()
This method modifies the current history entry.
history.replaceState({ page: 2 }, 'title 2', '?page=2');
- The parameters are the same as
pushState()
, but this method replaces the current entry instead of adding a new one.
history.back()
This method moves the user back one entry in the history stack, similar to clicking the browser's back button.
history.back();
history.forward()
This method moves the user forward one entry in the history stack, similar to clicking the browser's forward button.
history.forward();
history.go()
This method moves the user a specified number of entries in the history stack.
// Move back one entry
history.go(-1);
// Move forward one entry
history.go(1);
// Reload the current page
history.go(0);
Example
Here's a simple example demonstrating the use of pushState
and replaceState
:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>History API Example</title>
</head>
<body>
<button id="pushStateBtn">Push State</button>
<button id="replaceStateBtn">Replace State</button>
<button id="backBtn">Back</button>
<button id="forwardBtn">Forward</button>
<script>
document.getElementById('pushStateBtn').addEventListener('click', () => {
history.pushState({ page: 1 }, 'title 1', '?page=1');
});
document
.getElementById('replaceStateBtn')
.addEventListener('click', () => {
history.replaceState({ page: 2 }, 'title 2', '?page=2');
});
document.getElementById('backBtn').addEventListener('click', () => {
history.back();
});
document.getElementById('forwardBtn').addEventListener('click', () => {
history.forward();
});
</script>
</body>
</html>