JavaScript History Object

In this chapter, we will learn about the JavaScript history object. The history object is part of the Browser Object Model (BOM) and allows you to interact with the browser’s session history. We will cover:

• What is the History Object?
• Navigating the History
• Manipulating the History
• Simple Programs using the History Object

What is the History Object?

The history object is part of the BOM and provides an interface for interacting with the browser’s session history. It allows you to navigate back and forth through the user’s history and manipulate the history stack.

Navigating the History

You can navigate the history using various methods provided by the history object.

back()

Moves the browser back one page in the history.

history.back();

forward()

Moves the browser forward one page in the history.

history.forward();

go()

Moves the browser to a specific page in the history. You can use positive numbers to move forward and negative numbers to move backward.

history.go(-1); // Move back one page
history.go(1);  // Move forward one page
history.go(0);  // Reload the current page

Manipulating the History

You can manipulate the history stack using the pushState() and replaceState() methods.

pushState()

Adds a new entry to the history stack.

history.pushState({page: 1}, "Title 1", "/page1");

replaceState()

Modifies the current entry in the history stack.

history.replaceState({page: 2}, "Title 2", "/page2");

Example: Using pushState() and replaceState()

// Adding a new entry
history.pushState({page: 1}, "Title 1", "/page1");

// Modifying the current entry
history.replaceState({page: 2}, "Title 2", "/page2");

// Navigating back and forth
history.back();
history.forward();

Handling Popstate Event

The popstate event is fired when the active history entry changes. This allows you to handle state changes when the user navigates through the history.

Example

window.addEventListener("popstate", (event) => {
  console.log("Location: " + document.location + ", State: " + JSON.stringify(event.state));
});

// Adding new entries
history.pushState({page: 1}, "Title 1", "/page1");
history.pushState({page: 2}, "Title 2", "/page2");

// Navigating back triggers popstate
history.back();

Output:

Location: http://example.com/page1, State: {"page":1}

Simple Programs using the History Object

Program 1: Navigating the History

function navigateHistory(steps) {
  history.go(steps);
}

// Move back one page
navigateHistory(-1);

// Move forward one page
navigateHistory(1);

Program 2: Managing State with pushState and popstate

// Initial state
history.pushState({page: 1}, "Page 1", "/page1");

window.addEventListener("popstate", (event) => {
  console.log("Current state:", event.state);
});

// Add a new state
history.pushState({page: 2}, "Page 2", "/page2");

// Go back to previous state
history.back();

Output:

Current state: {"page":1}

Conclusion

In this chapter, you learned about the JavaScript history object, including how to navigate the history using back(), forward(), and go(), as well as how to manipulate the history stack using pushState() and replaceState(). You also learned how to handle the popstate event. Various use cases with simple programs were provided to demonstrate the usage of the history object. Understanding how to effectively use the history object is essential for managing navigation and state in web applications.