What is the History web API?
The web keeps growing and getting more sophisticated. Due to this, more support is being poured into the web, giving it the ability to do things native to the operating system.
Such support includes the History API.
History API
This API is used to manage or manipulate the history of our browser. It enables us to change the URL address in the browser address bar, and navigate back and forth in our browser history.
Whenever we navigate to a page, the URL of the page is added to the history stack. If we move to https://www.educative.io/answers and then move to https://www.educative.io/answers/what-is-uniform-cost-search, the history stack will look like this:
History stack-----------------------------1 "https://www.educative.io/answers"2 "https://www.educative.io/answers/what-is-uniform-cost-search"
The current page is https://www.educative.io/answers/what-is-uniform-cost-search. If we press the back button on our browser, the https://www.educative.io/answers will be loaded.
Then, if we press the forward button, https://www.educative.io/answers/what-is-uniform-cost-search will be loaded.
You can see that the browser uses the history stack to load the previous and next web pages visited. The History API gives us the ability to move back and forth within the history stack.
The History API is in the window object:
>> window.history// or just>> history<- > History { length: 0, scrollRestoration: "auto", state: {…} }
It returns a History object and inherits some methods from the HistoryPrototype class.
The most useful methods are:
pushStatereplaceStatebackforwardgo()
pushState
This method pushes a new URL to the address bar and the history stack. This will cause the browser to load the URL in the current tab.
Syntax
Its general structure is like this:
pushState(stateObject, title, url)
Parameters
The
stateObjectparameter is the data that will be passed to history event handlers when a new URL is pushed or popped from the history stack. ThestateObjectcan contain any data you want.titleis ignored by most browsers.urlis the URL that will be pushed to the history stack. This URL in the address bar will change to this URL.
Example
If we have our history stack like this:
1. example.com
Then, this will push https://www.educative.io/answers/what-is-uniform-cost-search onto the history stack.
pushState(null, null, "educative.io/answers/what-is-uniform-cost-search")
The history stack will now look like this:
1. educative.io/answers/what-is-uniform-cost-search2. educative.io/answers
replaceState
This replaces the current URL in the history stack with a new URL.
Syntax
Its general structure is this:
replaceState(stateObject, title, url)
Parameters
The parameters are the same as in the pushState method.
The current URL in the history stack will be set to this stateObject, title, and url.
Example
Let’s say we have a URL pushed to the stack by pushState:
pushState("someState", "title", "educative.io/answers")
The history stack looks like this:
1. "educative.io/answers" "someState" "title"
Then, we call this:
replaceState("currState", "currTitle", "educative.io/answers/what-is-uniform-cost-search")
This will replace the URL in the history state with the parameters passed to replaceState.
The history stack will now look like this:
1. "educative.io/answers/what-is-uniform-cost-search" "currState" "currTitle"
The current element in the history stack is the URL in the top position.
back
This method navigates to the previous URL from the current URL in the history stack.
Syntax
Its general structure is this:
history.back()
Parameters
This method does not take any input parameters.
Example
Let’s say our history stack looks like this:
1. educative.io/answers2. educative.io/answers/what-is-uniform-cost-search3. https://www.educative.io/answers/how-to-check-palindrome-numbers-in-java
The current element in the history stack is educative.io/answers. If we call history.back(), the previous element, it is 2. educative.io/answers/what-is-uniform-cost-search will be loaded in the browser.
If we call back() again, then the URL at 3, https://www.educative.io/answers/how-to-check-palindrome-numbers-in-java, will be loaded in the browser.
forward
This moves forward to the next URL in the history stack.
Syntax
Its general structure is this:
history.forward()
Parameters
This method takes no input parameters.
Example
Let’s say the history stack looks like this:
1. educative.io/answers2. educative.io/answers/what-is-uniform-cost-search3. educative.io/answers/how-to-check-palindrome-numbers-in-java
Our current URL is educative.io/answers. If we move back down the stack twice, we will land at 3, educative.io/answers/what-is-uniform-cost-search.
Now, from 3, if we call history.forward(), we will move to 2, i.e., educative.io/answers/what-is-uniform-cost-search, and the browser will load it. If we call history.forward() again, we will move forward to 1, which is educative.io/answers.
go()
This method enables us to specify the index in the history stack we want to navigate to.
Syntax
Its general structure is this:
history.go(index)
Parameters
The index denotes the index in the history stack we want to move to.
Example
Let’s say we have this:
History stack1. educative.io/answers2. educative.io/answers/what-is-uniform-cost-search3. educative.io/answers/how-to-check-palindrome-numbers-in-java
If we call history.go(2), the URL at 2, educative.io/answers/what-is-uniform-cost-search, will be loaded.
history.go(3) will load educative.io/answers/how-to-check-palindrome-numbers-in-java.
history.go(1) will load educative.io/answers.
If the index is 0 or no index was passed, the browser will reload the tab.
If the index is a negative number, e.g., go(-2) or go(), we will move backward in the history stack. In other words, history.back() is called.
