How to Get Window History in TypeScript?

The user’s history of visited web pages is represented via the window.history object. A history of the pages that have been loaded is stored in an array called the history object. The history object only provides a finite amount of information. The history object only has a few properties and methods since it is impossible to know where the current URL is located within the history object.

The previous URL in the history list is loaded using the history.back() method. The second method of history is the forward() method, which loads the following URL in the history list. It is analogous to clicking the Back button in the browser. It is the same as pressing the browser’s forward button.

You can get the window history in TypeScript by using the window.history object. This object contains the history of the current window, including the current page and any pages that have been visited before. You can use the back(), forward(), and go() methods to navigate through history. You can also access the history via the length property to get the number of entries in the history list.

Steps to Get Window History

Window history is a type of interface that allows users to move backward and forwards through previously viewed web pages. It is available in all modern browsers and is part of the browser specification.

In TypeScript, window history is available as a property of the window object and can be accessed as window.history. It can also be accessed through the document object as document.history. The window.history object stores the URLs of all the pages the user has visited during their current session. It also stores the history list length, which can be accessed using the length property.

The history object has several methods associated with it. The back() method moves the user to the previous page in the history list, while the forward() method moves the user to the next page. The go() method can move to a specific page in the history list by providing the position in the list as an argument.

It is also possible to detect changes in the history list. The popstate event is fired whenever the user moves back or forward in the history list, and it can be used to detect when the user has gone to a new page. This event can be captured by attaching an event listener to the window.onpopstate event.

For example, if the user navigates to a new page, the popstate event will be fired, and the following code can be used to detect this event −

window.onpopstate = (event) => {
   console.log("The user has navigated to a new page!");
}

This code will detect when the user has navigated to a new page and logged a message to the console.

In summary, window history is a type of interface that allows users to move backward and forwards through previously viewed web pages. It is available in TypeScript as the window.history object, and can be used to access the URLs of the pages the user has visited, as well as to detect changes in the history list.

We need to compile the TypeScript code to make the JavaScript code, and then we can use the JavaScript code in our webpage.

Syntax

let window_history = window.history;

This code snippet uses the window.history property to assign the window history to a variable called window_history. The window.history property contains the session history of the current window and can be used to access the URL, redirect the user to a different page, and track the user's navigation.

Example

The following TypeScript example uses a web page to display the browser history. In this example, we created a class named Window_History that contains back() and forward() methods. The back() method triggers the Window History back method, and the forward() method triggers the Window History forward method. The user can navigate to the previous and next URL using these two methods. We used two buttons to execute these two methods using the click event. We first wrote the typescript code in the file, compiled it to make a JavaScript file, and then used the JavaScript code on the web page.

TypeScript File

class Window_History {
   back() {
      return window.history.back()
   }
   forward() {
      return window.history.forward()
   }
}
window.onload = () => {
   var window_history_obj = new Window_History()

   var back_button = <HTMLButtonElement>document.getElementById('back-button')
   back_button.onclick = function () {
      window_history_obj.back()
   }

   var forward_button = <HTMLButtonElement>(
      document.getElementById('forward-button')
   )
   forward_button.onclick = function () {
      window_history_obj.forward()
   }
}

HTML File

<html>
<body>
   <h2><i>Window History</i> in TypeScript</h2>
   <button id="back-button">Go Back</button>
   <button id="forward-button">Go Forward</button>
   <div id="root" style="border: 1px solid black; padding: 1%">
      Click on the above buttons to use Window History
   </div>
   <script>
      var Window_History = /** @class */ (function () {
         function Window_History() {}
         Window_History.prototype.back = function () {
            return window.history.back()
         }
         Window_History.prototype.forward = function () {
            return window.history.forward()
         }
         return Window_History
      })()
      window.onload = function () {
         var window_history_obj = new Window_History()
         var back_button = document.getElementById('back-button')
         back_button.onclick = function () {
            window_history_obj.back()
         }
         var forward_button = document.getElementById('forward-button')
         forward_button.onclick = function () {
            window_history_obj.forward()
         }
      }
   </script>
</body>
</html>

Output

After clicking ‘Go Back.’

After clicking ‘Go Forward’