How to implement Browser Navigation Using LinkedList Data structure

Before we deep dive into how can we do this, there are few basic operations we need to perform.

• Create a Node Class with a key and next property which we will use to create a real node
• Create a main class where we will define all the functions needed
• Create utility function to convert the array of URLs to nodes
• Create utility functions to traverse and another to print the array or do required operation in the app

As I go into details, I want to say that the key property of the node class is the property where we store the data and next property keeps the reference of the next node. Usually the node which we call head is none.

class Node:
    def __init__(self, key):
        self.key = key
        self.next = None

The below is the structure of a main class

class LinkedListOperation:
    def __init__(self) -> None:
        pass

    def compareAndReturn(self, key):
        print(key)
        return

    def traverseUrls(self, head):
        curr2 = head
        while (curr2 != None):
            self.compareAndReturn(curr2.key)
            curr2 = curr2.next

    def arrayToList(self, array):
        head = None
        for i in urls:
            head = self.insertAtBegining(head, i)
        return head

    def insertAtBegining(self, head, url):
        curr = head
        curr = Node(url)
        curr.next = head
        return curr

After that we can begin with our functionality implementation.

Inserting the visited URLs to the data structure

Usually, you would use store the URLs visited either in memory of the browser. So when a user is hitting a particular back or next button.

Here when you could build a list of url for a particular session or have different lists for pages.

The first step is to convert the list to a LinkedList and insert all the URLs visited so far in the data structure.

You can follow LIFO or FIFO way whichever you want. I have included both the ways in the code. Call that insert function of the class at the link click. (arrayToList). Store the list in some memory of browser.

You can the call the traversal and display function where you can return the URL and redirect back to the page.

Below is the code for both insert at beginning and end

class LinkedListOperation:
    def __init__(self) -> None:
        pass

    def compareAndReturn(self, key):
        print(key)
        return

    def traverseUrls(self, head):
        curr2 = head
        while (curr2 != None):
            self.compareAndReturn(curr2.key)
            curr2 = curr2.next

    def arrayToList(self, array):
        head = None
        for i in array:
            head = self.insertAtBegining(head, i)
        return head

    def insertAtBegining(self, head, url):
        curr = head
        curr = Node(url)
        curr.next = head
        return curr

    def arrayToListEnd(self, array):
        head = None
        for i in array:
            head = self.insertAtEnd(head, i)
        return head

    def insertAtEnd(self, head, url):
        curr = head
        if (curr == None):
            curr = Node(url)
            return curr
        while (curr.next != None):
            curr = curr.next
        curr.next = Node(url)
        return head

But when you are getting back to the previous page, you need to pop that particular URL from the list. you can add the same URL when you want to visit the page again.

class LinkedListOperation:
    def __init__(self) -> None:
        pass

    def compareAndReturn(self, key):
        print(key)
        return

    def traverseUrls(self, head):
        curr2 = head
        while (curr2 != None):
            self.compareAndReturn(curr2.key)
            curr2 = curr2.next

    def arrayToList(self, array):
        head = None
        for i in array:
            head = self.insertAtBegining(head, i)
        return head

    def insertAtBegining(self, head, url):
        curr = head
        curr = Node(url)
        curr.next = head
        return curr

    def arrayToListEnd(self, array):
        head = None
        for i in array:
            head = self.insertAtEnd(head, i)
        return head

    def insertAtEnd(self, head, url):
        curr = head
        if (curr == None):
            curr = Node(url)
            return curr
        while (curr.next != None):
            curr = curr.next
        curr.next = Node(url)
        return head

    def insertAtPosition(self, head, urlToBeinserted, pos):
        temp = Node(urlToBeinserted)
        curr = head
        psn = 0
        while (curr.next != None and psn != pos):
            curr = curr.next
            psn = psn + 1
        if (pos == psn):
            temp.next = curr.next
            curr.next = temp
        return head

    def deleteAtFirst(self, head):
        print(head)

        if (head == None):
            return None
        else:
            return head.next

    def deleteAtLast(self, head):
        if (head == None):
            return None
        else:
            curr = head
            temp = head
            while (curr.next.next != None):
                curr = curr.next
            curr.next = None
            return head

You can execute the functions like this

urls = ["url1", "url2", "url3", "url5", "url89"]


instanceOfLL = LinkedListOperation()
head = instanceOfLL.arrayToListEnd(urls)
head = instanceOfLL.traverseUrls(head)

print(""""""Popping on Button Click"""""""")
head = instanceOfLL.arrayToListEnd(urls)
head = instanceOfLL.deleteAtFirst(head)
head = instanceOfLL.traverseUrls(head)

Hope this helps!