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:

1class BrowserHistory {
2    constructor(url) {
3        this.history = [];
4        this.pointer = -1;
5        if (url !== undefined) {
6            this.history.push(url);
7        }
8    }
9}

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:

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

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:

1back() {
2    this.pointer = Math.max(0, --this.pointer);
3    return this.history[this.pointer];
4}
5
6forward() {
7    this.pointer = Math.min(this.history.length - 1, ++this.pointer);
8    return this.history[this.pointer];
9}

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:

1class BrowserHistory {
2    constructor(url) {
3        this.history = [];
4        this.pointer = 0;
5        if (url !== undefined) {
6            this.history.push(url);
7        }
8    }
9
10    visit(url) {
11        this.history.length = this.pointer + 1;
12        this.history.push(url);
13        this.pointer++;
14    }
15    
16    back() {
17        this.pointer = Math.max(0, --this.pointer);
18    }
19
20    forward() {
21        this.pointer = Math.min(this.history.length - 1, ++this.pointer);
22    }
23}

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.

This is our final solution.

To visualize the solution and step through the below code, click Visualize the Solution on the right-side menu or the VISUALIZE button in Interactive Mode.

xxxxxxxxxx

console.log(browserHistory.forward());  // Should print "https://twitter.com"

// BrowserHistory class definition

class BrowserHistory {

    constructor(url) {

        this.history = [];

        this.pointer = -1;

        if (url !== undefined) {

            this.history.push(url);

            this.pointer++;

        }

    }

​

    visit(url) {

        this.history = this.history.slice(0, this.pointer + 1);

        this.history.push(url);

        this.pointer++;

    }

​

    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];

    }

}

​

// Driver code to test the BrowserHistory class

const browserHistory = new BrowserHistory("https://algodaily.com");

​

// Visiting new URLs

You're doing a wonderful job. Keep going!

If you had any problems with this tutorial, check out the main forum thread here.