0

Estou fazendo um projetinho de uma tabela dinâmica usando javascript e o localstorage.

O projeto em sim tem duas documentos HTML uma mostrando a tabela com um lista de alunos cadastrado, e 3 opções: Cadastrar novo Aluno, Editar Aluno, Remover Aluno. E a outra com um pequeno formulario com os campos de matricula, nome e ano de ingresso.

inserir a descrição da imagem aqui No caso, quando eu aperto no botão de cadastrar novo aluno eu abro a página de formulário, preencho os dados e quando clico no botão de confirmar ele armazena os dados no localstorage. Estou fazendo assim:

//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);

Porém, quando eu volto para a página da tabela não consigo inserir esse novo aluno cadastrado na tabela e não faço ideia de como mostrar todos os alunos já cadastrados toda vez que a página da tabela for recarregada.

O script da página HTML da tabela está assim:

//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();

Faz um tempo que to tentando resolver isso, alguém da um help por favor kkkjkjkj

6
  • A melhor forma de persistir os dados, nesse caso, é salvando como um objeto. Commented 1/10/2019 às 19:51
  • tem como eu salvar os dados como objeto no localstorage? sou bem iniciante kkk Commented 1/10/2019 às 19:52
  • Sim, tem. Faz assim: localStorage.setItem("alunos", JSON.stringify(arrayDeAlunos)); Commented 1/10/2019 às 19:53
  • as variaveis text_matricula, text_nome e text_ano estão recebendo os valores corretos? o problema não é na passagem de valores entre uma tela e outra mas sim na apresentação, certo? Commented 1/10/2019 às 19:56
  • não sei, eu checo o localstorage e os dados tão lá, mas n aparece nd na tabela Commented 1/10/2019 às 20:05

1 Resposta 1

0

Tente utilizar

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

ao invés de :

campo_matricula.appendChild(text_matricula);
campo_nome.appendChild(text_nome);
campo_ano.appendChild(text_ano);
5
  • blz, vou tentar aqui meu consagrado Commented 1/10/2019 às 20:11
  • Deu certo, consigo adcionar o novo aluno cadastrado hehe vlwzão Commented 1/10/2019 às 20:15
  • Vc tem alguma ideia de como eu posso armazenar todos os alunos cadastrados para que quando a página mostre todos os alunos já cadastradados ao invés de apenas o ultimo aluno cadastrado? vou precisar ter um certo controle sobre eles pra pode aplicar na opção de editar aluno Commented 1/10/2019 às 20:16
  • marca minha resposta como resposta aceita por favor meu consagrado Commented 1/10/2019 às 20:17
  • você pode salvar tudo em um JSON e salvar no o localStorage do mesmo jeito, mas para salvar um JSON no localStoage precisa colocar um localStorage.setItem("key", JSON.stringify(json)); e para pegar tem que dar um const resultado = JSON.parse(localStorage.getItem("key")); Commented 1/10/2019 às 20:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .