Create Browser History

Every modern browser has implemented a logic for keeping track of the users' browsing history. Usually, it keeps track of the websites visited, and their order, so the user can be able to go back and forth between their recently visited websites.

Can you implement a simplified version of a browser history tracker, that will keep track of the order of visited pages (URLs), and will implement logic for visiting the previous, current and following websites?

It should work like this:

We have an empty browser history []

Then we visit three websites in the following order: First we visit website A, then B, and then C. Then our browsing history would look like this, having website C as the page we are currently visiting: js [ A, B, C] ↑

If we "go back", or call the method back(), our current website would be B, our previous would be A, and the next one will be C.

[ A, B, C]
     ↑          

Thus, by "going forward", or calling the method forward(), we would go to the website C again.

Browser History Tracker: A Simplified Version

Understanding how browser history works can be intriguing. Browsers are quite efficient at keeping a tab of our actions. Today, we'll create a simplified model of a browser history tracker. This tracker will maintain the sequence of visited pages (URLs) and allow us to navigate forward and backward in history. 🌐

Class Structure and Initial Setup

Let's begin by laying down the groundwork for our Browser History class. We'll need two main properties:

1. History Array: To keep track of all the visited URLs.
2. Pointer: An integer that points to the current URL we're viewing in the history array.

Here's the initial class setup with a constructor:

class BrowserHistory {
    constructor(url) {
        this.history = [];
        this.pointer = -1;
        if (url !== undefined) {
            this.history.push(url);
        }
    }
}

What's happening here?

• The constructor initializes an empty history array and sets the pointer to -1.
• If a URL is provided during the instantiation, it gets added to the history.

Navigating to a New Page

When you visit a new URL, what happens? The browser should add it to your history, right? Let's code that part:

visit(url) {
    this.history = this.history.slice(0, this.pointer + 1);
    this.history.push(url);
    this.pointer++;
}

What's happening here?

• We first trim the history array up to the current pointer. This is essential because if you navigate to a new URL from a past page, the future history should be erased.
• The new URL is pushed into the history array.
• The pointer is incremented to point to the new current URL.

Moving Back and Forth in History

Now, let's implement the methods that allow us to go back and forth in our browser history:

back() {
    this.pointer = Math.max(0, --this.pointer);
    return this.history[this.pointer];
}

forward() {
    this.pointer = Math.min(this.history.length - 1, ++this.pointer);
    return this.history[this.pointer];
}

What's happening here?

• back(): Decreases the pointer but ensures it doesn't go below 0 using Math.max().
• forward(): Increases the pointer but ensures it doesn't exceed the length of the history array using Math.min().

Putting It All Together

Here's the full BrowserHistory class with all its glory:

class BrowserHistory {
    constructor(url) {
        this.history = [];
        this.pointer = 0;
        if (url !== undefined) {
            this.history.push(url);
        }
    }

    visit(url) {
        this.history.length = this.pointer + 1;
        this.history.push(url);
        this.pointer++;
    }

    back() {
        this.pointer = Math.max(0, --this.pointer);
    }

    forward() {
        this.pointer = Math.min(this.history.length - 1, ++this.pointer);
    }
}

And there you have it—a simplified browser history tracker! This class now allows you to maintain a list of visited URLs and navigate through them just like a real browser.

One Pager Cheat Sheet

• You can create a simplified version of a browser history tracker that will keep track of the order of visited pages (URLs) and implement logic for visiting the previous, current and following websites.
• The BrowserHistory class should include a history array, a pointer property and methods for visiting, going back, and going forward to the previously and next visited website URLs.