Javascript history.pushState() Method

Whenever history is changed, the challenge is to find out about it. The pushState() method has been called. It is used to monitor alterations to the history of the browser. To monkey-patch window.history when the pushState() method is used.

The function history will then have all of our own logic added to it, which will run each time the browser's history is modified.

In other words, we can add a record to the web browser's session history stack using the history.pushState() method.

Syntax

The syntax for the pushState() method is as follows:

Three parameters are accepted by the pushState() method:

1) state

A serializable object is a state. A popstate event is launched whenever you navigate to a different state. Additionally, the popstate event has a state attribute that points to the state object of the history entry.

2) title

Today, the majority of browsers ignore this title property. Utilise documen.title property in its place if wewant to update the document's title. In real life, the title parameter is typically passed an empty string.

3) url

We can specify the URL for the new history item using the optional url. The method will throw an exception if the URL doesn't have the same origin as the one it is currently using.

The web browser won't load the new address when we set it. If the user doesn't give the url, the current URL is used by default.

Examples

The following examples describe different information with the history.pushstate() method.

Example 1:

The below example is displayed the basic functionality of the history.pushstate() method. Here we can use the windows location url to get a current link. Use the current url to get the methods data.

Output

The image shows the data as an output of the history url.

Example 2

The below example displays the functionality of the history.pushstate() method. we can use null state, current url, and empty parameter.

Output

The image shows the data as an output of the history url.

Example 3

The below example displays the functionality of the history.pushstate() method. We can get the url path of the required id. If a web page has an available id, then use it as a URL part or tab.

Output

The image shows the data as an output of the history url.

PushState() history in JavaScript illustration

We will create a straightforward application that displays React, Vue, and Angular tabs.

The content of the specified item will be displayed when you click a tab. The URL will also be updated using the history. The pushState() function follows following steps:

• The app will load the associated content if you copy the hashtag-containing URL and load it from the online browser.

• First, use the querySelector() function to choose the tab and content elements.

• Second, create a map object that links each tab's id to its corresponding URL hash.

• Third, create a new map named data for associating an object's tab id with it. Url and content are two of the object's properties.

• Fourth, the click event takes place each time a tab (or li elements) is clicked. We'll make use of the event delegation to increase efficiency.
  • We will therefore handle the clicking event on every tab's parent rather than on each individual tab.
  • The if clause makes sure that the event handlermodifies the text and url when the click event happens on each distinct tab. When weclick the tab's content area, nothing happens.
• Fifth, the update() function assigns the CSS class to the selected user tab while removing the active class from the active tab. We run the update() method and provide the tab id into it inside the event handler.

• Additionally, based on the tab id, it retrieves the url and information from the data. It employs history.pushState() function to modify the URL.

Example

The following example shows the history.pushState() method with different URL tabs in a single container. Here, we create three tabs with their information. If we click on the tab, the URL displays the tab data.

Output

The image shows the tab with multiple links for url history.

Conclusion

To add a record to the session history stack of the web browser, use the history.pushState() method.