How to access a javascript object in another HTML page?

Question

I’m designing a dynamic table using javascript and localstorage.

The project has two HTML documents one showing the table with a list of registered students, and 3 options: Enroll a New Student, Edit Student, Remove Student. And the other with a small form with the registration fields, name and year of entry.

In this case, when I press the sign-up button I open the form page, fill in the data and when I click the confirm button it stores the data in the localstorage. I’m doing like this:

//Variáveis Globais
        var campo_matricula = document.querySelector("input.matricula");
        var campo_nome = document.querySelector("input.nome");
        var campo_ano = document.querySelector("input.ano");
        var botao_confirmar = document.querySelector("input.confirmarBtn");
        var botao_cancelar = document.querySelector("input.cancelarBtn");

        //Objetos
        function Aluno(matricula, nome, ano) {
            this.matricula = matricula;
            this.nome = nome;
            this.ano_de_ingresso = ano;
        }

        //Funções
        function adicionar_dados_localstorage(event){
            event.preventDefault();
            //Criando uma nova instância do objeto Aluno
            novo_aluno = new Aluno(campo_matricula.value, campo_nome.value, campo_ano.value);
            //Adicionando no localStorage
            localStorage.setItem("matricula", novo_aluno.matricula);
            localStorage.setItem("nome", novo_aluno.nome);
            localStorage.setItem("ano", novo_aluno.ano_de_ingresso);
        }

        function abrir_documento_tabela(event) {
            window.location.assign("index.html");
        }

        //Rotina Principal
        botao_confirmar.addEventListener("click", adicionar_dados_localstorage);
        botao_confirmar.addEventListener("click", abrir_documento_tabela);

However, when I go back to the table page I cannot insert this new student registered in the table and I have no idea how to show all students already registered every time the table page is reloaded.

The script of the table’s HTML page looks like this:

//Variáveis globais
            var corpo_tabela = document.querySelector("tbody");

            //Objetos

            //Funções
                function criar_linha_tabela(){
                    //criar linha da tabela de Alunos
                    var linha = document.createElement("tr");
                    var campo_matricula = document.createElement("td");
                    var campo_nome = document.createElement("td");
                    var campo_ano = document.createElement("td");

                    //Criar o conteúdo da linha criada
                    var text_matricula = localStorage.getItem("matriucla");
                    var text_nome = localStorage.getItem("nome");
                    var text_ano = localStorage.getItem("ano");;

                    //Vincular o conteúdo aos elementos da linha criada
                    campo_matricula.appendChild(text_matricula);
                    campo_nome.appendChild(text_nome);
                    campo_ano.appendChild(text_ano);

                    linha.appendChild(campo_matricula);
                    linha.appendChild(campo_nome);
                    linha.appendChild(campo_ano);

                    //Vincular os elementos da linha criada ao documento
                    corpo_tabela.appendChild(linha);
                }

            //Rotina Principal
            window.onload = criar_linha_tabela();

It’s been a while since I’ve been trying to figure it out, somebody please help kkkjkj

Answer 1

Try to use

campo_matricula.innerHTML = text_matricula
campo_nome.innerHTML = text_nome
campo_ano.innerHTML = text_ano

instead of :

campo_matricula.appendChild(text_matricula);
campo_nome.appendChild(text_nome);
campo_ano.appendChild(text_ano);