Understanding the History Object

Introduction

We've been learning about the Browser Object Model (BOM) and its various parts. So far, we've talked about the Window, Location, and Navigator objects. Now, let's talk about another important part of the BOM: the History object.

What is the History Object?

The History object is like a record of the pages you've visited in your current browsing session. Think of it as a list of web pages that the browser keeps track of as you move from one page to another. With the History object, you can go back to the previous page you visited or go forward to a page you navigated away from.

Imagine the History object as a time machine that lets you travel back and forth through the web pages you've visited.

Understanding Key Terms

Before we talk about how to use the History object, let's understand some key terms:

Session History: This is the list of web pages you have visited in the current browser session. Each tab or window in your browser has its own session history.
Back: This means going to the previous page in the session history.
Forward: This means going to the next page in the session history, but only if you have gone back before.

Properties of the History Object

The History object has some properties that give us information about the session history. Here is an important one:

length: This property tells you how many entries are in the session history, including the current page.

For example, if you have visited 5 pages in the current session, history.length will return 5.

Methods of the History Object

The History object also has some methods that allow you to navigate through the session history. Here are the most important ones:

back(): This method takes you to the previous page in the session history. It's like clicking the back button in your browser.
forward(): This method takes you to the next page in the session history. It's like clicking the forward button in your browser.
go(): This method allows you to go to a specific page in the session history. You can tell it how many pages to move back or forward. For example, history.go(-1) takes you to the previous page, and history.go(1) takes you to the next page.

Example: Using the History Object

Let's look at some examples of how we can use the History object to navigate through the session history.


<!DOCTYPE html>
<html>
<head>
<title>History Object Example</title>
</head>
<body>


<script>
// Get the number of entries in the session history
const historyLength = history.length;
console.log("History Length: " + historyLength);

// Navigate to the previous page
function goBack() {
history.back();
}

// Navigate to the next page
function goForward() {
history.forward();
}

// Navigate to a specific page in the session history
function goToPage(number) {
history.go(number);
}
</script>

<button onclick="goBack()">Go Back</button>
<button onclick="goForward()">Go Forward</button>
<button onclick="goToPage(-1)">Go to Previous Page</button>

</body>
</html>

In this example, we use different methods of the History object to navigate through the session history. The goBack() function moves to the previous page, the goForward() function moves to the next page, and the goToPage() function moves to a specific page in the history based on the number you provide.

Conclusion

In this lesson, we've learned about the History object and its properties and methods. We've seen how to use the History object to navigate through the session history and manipulate history entries. The History object is an important part of the BOM, and understanding how to use it can help you build more dynamic and interactive web applications.

We'll continue to explore the BOM and its components in future lessons. Stay tuned!