2

I have tab1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/list.js"></script>
    <title>Tab 1</title>
</head>
<body>
    <h1>Here I fill the linked list with data</h1>
    <button type="button" onclick="fillList();">Fill list</button>
    <button type="button" onclick="testThisTab();">Test to print the linked list generated in this tab</button>
    <a href="t2.html">Go to other page</a>
</body>
</html>

With the above code I have a button Fill list, and with this button I start the method fillList in my JS file, then I have a button Test to print the linked list generated in this tab, with this button I test that the linked list is working because I get in console:

List filled
5
1
6
3
2

and then I have a hyperlink to go to the tab2.html.

In tab2.html I have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/list.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>Here I want to use the linked list generated in the other view</h1>
    <button type="button" onclick="useOfMethosOfLinkedList();">print list data in console</button>
</body>
</html>

In the above code I want to print the data of the linked list generated in tab1.html, but when I press the print list data in console button, I don´t get anything in console, maybe because when I turn the page the data of the linked list gets clear.

My javascript code name list.js is:

class Node {
    constructor(data) {
        this.data = data;
        this.next = null;
    }
}

class LinkedList {
    constructor() {
        this.head = null;
        this.size = 0;
    }

    empty() {
        return this.head == null;
    }

    add(data) {
        let aux = new Node(data);

        if (this.empty()) {
            this.head = aux
        } else {
            aux.next = this.head;
            this.head = aux;
        }
    }

    print() {
        let aux = this.head;
        while (aux != null) {
            console.log(aux.data);
            aux = aux.next;
        }
    }
}

let listl = new LinkedList();
function fillList() {
    listl.add("2");
    listl.add("3");
    listl.add("6");
    listl.add("1");
    listl.add("5");
    console.log("List filled");
}

function useOfMethodsOfLinkedList() {
    listl.print()
}

function testThisTab() {
    listl.print()
}

I were looking for information to save the data but it just appear information with API's, but I can´t use that, so if could help to find any solution I will be so grateful.

narocac
  • 31
  • 6
  • when you change page everything gets lost unless you save the state somehow.. but it's not clear why you cannot use the web storage api. Otherwise you need to serialize the object and send it to the server for storage and you have to implement the api also to retrieve the saved object. Another very weird approach could be to serialize the list in json and post it to the next page when you click the link to tab2.html. Give feedback if this last one approach could be interesting to you – Diego D Jun 10 '22 at 07:41
  • Save the data to localStorage (or sessionStorage) and have the other tabs listen for a [storage event](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) – Yogi Jun 10 '22 at 07:51

0 Answers0