History Object
This object denotes the web browsing history of a user in the form of arrays consisting of the URLs that the user visited. This object is used to load web pages, moreover, it is a property of the window object.
Syntax
It has the following syntax.
Or,
The history object consists of certain properties and methods that define its functionalities. These are explained in detail below.
Properties
The JavaScript history object consists only of one property which is as follows.
length
The length property of the history object is used for fetching the total number of pages visited by the user in the ongoing browsing session. If the user has not visited any web page, this property will return 1, corresponding to the current web page.
Syntax
The length property’s syntax is provided below.
Example
Suppose you want to fetch the number of web pages you visited in the present browsing session.
In the above example, the length property of the history object is being utilized to extract the total number of URLs visited in the current session.
document.getElementById("tutorial").innerHTML = length;
Output
Using the length property, the total number of web pages visited are fetched.
Methods
The JavaScript history object consists of the following methods.
forward()
It is used for the purpose of loading the next page (if a next page exists). The browser calls this method by default when the user clicks the forward button in the browser, however, we can also do it manually.
Syntax
It has the following syntax.
Example
Suppose, you want to visit the next page in the history list using the forward() method of the history object.
In the above example, a button with a click event is being created. By clicking on it the next page in the browsing history will be loaded.
back()
It is used for the purpose of loading the previous page (if there is a previous page). The browser calls this method by default when the user clicks the back button in the browser, however, we can also perform it manually.
Syntax
It has the following syntax.
Example
Suppose you want to load the previous page in the browsing history list using the back() method of the history object.
In the above example, a button with a click event is being created. By clicking on it the previous page in the history list will be loaded.
go()
It is used for the purpose of loading a particular page in the browning history list using the page number.
Syntax
It has the following syntax.
Suppose you want to load a page which is 3 pages back then use the following code.
In the above example, a button with a click event is being created, and clicking on the button will take you 3 pages back.
Points to remember!
- To reload the current page use history.go(0).
- There isn’t any difference between history.forward() and history.go(1).
- There isn’t any difference between history.back() and history.go(-1).
Conclusion
The history object (property of the window object) denotes the web browsing history of a user in the form of arrays consisting of the URLs that the user visited. It consists of many properties and methods such as length property is used for fetching the number of web pages visited by the user, forward() method is used to load the next page, back() method is used to load the previous page and go() method is used to load a specific page using the page number. These properties and methods are highlighted in this write-up along with suitable examples.
