Skip to main content

JavaScript Web History Api

JavaScript Web History API are a set of methods and properties that allow developers to interact with the browser history.

The Web History API is part of the HTML5 specification, and is implemented in most modern browsers which allows developers to manipulate the browser history, and even create new entries in the history, without reloading the page.

This is useful for creating single-page applications, where the URL changes but the page does not reload.

Web History API is also useful for creating custom navigation buttons, such as a "back" button that takes the user to the previous page in their history.

The back() Method​

The back() method is a built-in function in the window.history object of JavaScript, which is used to navigate the user to the previous page in their browsing history.

Here's an example of using the back() method:

// Navigates the user to the previous page in their history
window.history.back();

The History go() Method​

The go() method is a built-in function in the window.history object of JavaScript, which is used to navigate the user to a specific page in their browsing history.

Here's an example of using the go() method:

// Navigates the user one page back in their history
window.history.go(-1);

The go() method takes an integer as its argument, which specifies the number of pages to go back or forward in the browsing history. A negative integer argument, such as -1 in this example, means to go back one page in the history.

The History forward() Method​

The forward() method is a built-in function in the window.history object of JavaScript, which is used to navigate the user to the next page in their browsing history.

Here's an example of using the forward() method:

// Navigates the user to the next page in their history
window.history.forward();

The History pushState() Method​

The pushState() method is a built-in function in the window.history object of JavaScript, which is used to create a new entry in the browser history. Here's an example of using the pushState() method:

// Creates a new entry in the browser history
window.history.pushState({page: 1}, "Page 1", "?page=1");

The pushState() method takes three arguments:

  • state - An object containing data to associate with the new history entry. This data can be accessed later using the state property of the popstate event.
  • title - The title of the new history entry. This argument is currently ignored by most browsers, so it is recommended to pass an empty string.
  • url - The URL of the new history entry. This argument is optional, and if omitted, the browser will use the current URL.

The History replaceState() Method​

The replaceState() method is a built-in function in the window.history object of JavaScript, which is used to replace the current entry in the browser history. which allows developers to interact with the user's browsing history.

Here's an example of using the replaceState() method:

// Replaces the current entry in the browser history
window.history.replaceState({page: 2}, "Page 2", "?page=2");

The replaceState() method also takes three arguments:

  • state - An object containing data to associate with the new history entry. This data can be accessed later using the state property of the popstate event.
  • title - The title of the new history entry. This argument is currently ignored by most browsers, so it is recommended to pass an empty string.
  • url - The URL of the new history entry. This argument is optional, and if omitted, the browser will use the current URL.

The popstate Event​

The popstate event is a built-in event in the window object of JavaScript, which is triggered when the user navigates through their browsing history.

Here's an example of using the popstate event:

// Adds an event listener for the popstate event
window.addEventListener("popstate", function(event) {
  // Log the state data to the console
  console.log(event.state);
});

The popstate event is triggered when the user navigates through their browsing history, either by using the browser's back and forward buttons, or by using the back(), forward(), or go() methods.