2

Mini sistema de cadastro de pets (acesso através do localStorage) parte7

#HTML #JavaScript #CSS
Fernanda Oliveira
Fernanda Oliveira

#meuPrimeiroProjeto

#parte7 – Arquivo de script (script.js)



Bom, no início eu queria muito fazer esse projeto, sendo que ainda não tenho conhecimento de banco de dados, mas pesquisando vi que havia a possibilidade de criar esse um sistema através de um armazenamento local - localStorage - utilizando a API de Web Storage.

Mas o que vem a ser o localStorage?

LocalStorage é uma propriedade que permite o acesso a um objeto armazenado localmente. Uma vez armazenado, também é possível adicionar, recuperar ou excluir esses dados. Os navegadores concedem essa permissão através de uma chave e um valor (ambos são strings, mesmo se houver um número inteiro, ainda assim serão considerado strings) e os acessos são feitos através dos métodos: Storage.getItem() e Storage.setItem().  

Essas informações armazenadas continuarão existindo mesmo depois que o navegador for fechado e/ou reaberto. Se quisermos eliminar completamente essas informações, será necessário fazer uma exclusão manual ou criar uma função para através dela fazer essa execução.

* Há também um outro mecanismo chamado sessionStorage, mas este não será utilizado nesse projeto.

Antes do localStorage ser utilizado, precisa ser feito uma verificação para confirmar se o navegador do usuário é compatível.  Outra questão que talvez possa impedir a utilização desse sistema é o navegador do usuário estar com a opção de bloqueios para cookies ativo. Para esse momento não cheguei a utilizar essa verificação, já que a maioria de nós procuramos manter os navegadores atualizados devido a nossas atividades. Talvez mais tarde eu faça essa implementação até mesmo para praticar.

No final desse artigo coloquei alguns links para que vocês possam ler, inclusive sobre o localStorage. Chegando lá não deixe de conferir ;-)


Falando agora de um modo geral, o mini sistema funcionará da seguinte forma:
Quando o usuário clicar em cadastrar, as informações preenchidas no input serão enviadas para as respectivas variáveis. Quando esse cadastro for concluído, as informações ficarão armazenadas no objeto storage do navegador, e será emitido um alert de confirmação de cadastro realizado.  Para ver uma lista dos pets que foram cadastrados, basta acessar a página consultar. 
Vamos ver esse funcionamento em maiores detalhes?


Esta função preenchimentoCampos vai pegar o valor (value) digitado nos input e armazenar nas variáveis. Cada uma corresponde ao seu próprio id (foram passadas como parâmetros no botão e na função).
function preenchimentoCampos(registroPet, nomePet, tipoPet, idadePet) {
  let registro = document.getElementById(registroPet).value;
  let nome = document.getElementById(nomePet).value;
  let tipo = document.getElementById(tipoPet).value;
  let idade = document.getElementById(idadePet).value;
  cadastrarPet(registro, nome, tipo, idade);
}

A função cadastrarPet vai criar um objeto (petCadastro) onde as informações armazenadas serão resgatadas do localStorage através do getItem.
Para quem estiver fazendo o cadastro pela primeira vez, não vão existir informações salvas, então será criado um vetor (no if), senão (else) através do método JSON.parse() faço a conversão da string para JSON e dos cadastros que já existem. 
Em seguida, cada novo cadastro vai sendo adicionado no final da estrutura com o método push.

O setItem vai criar um registro novo mas caso já existam cadastros, ele vai atualizá-los e convertê-los em uma string através do método JSON.stringify. A função será finalizada com um alert exibindo uma mensagem de cadastro realizado com sucesso e a página será recarregada.
function cadastrarPet(registro, nome, tipo, idade) {
  let petCadastro = { register: registro, name: nome, type: tipo, age: idade };
  let cadastros = localStorage.getItem("dadosCadastros"); 
  if (cadastros == null) cadastros = [];
  else cadastros = JSON.parse(cadastros);
  cadastros.push(petCadastro);
  localStorage.setItem("dadosCadastros", JSON.stringify(cadastros)) 
  alert("O cadastro do pet " + nome + " foi feito com sucesso!");
  location.reload();
}

A função listarCadastros vai exibir todo cadastro realizado no mini sistema, ou seja, todos os elementos que eu tiver no vetor.  Essas informações serão pegas da variável do localStorage através do getItem, mas caso não tenha sido feito nenhum cadastro, será exibido a mensagem que encontra-se no if. Caso contrário, ele vai transformar novamente de string para JSON, executar a função e criar uma lista não ordenada.
function listarCadastros() {
  let cadastros = localStorage.getItem("dadosCadastros");
  document.write("<h1>Consulta de Cadastros:</h1>")
  if (cadastros == null)
    document.write("<h3>Ainda não há cadastros realizados para consultar.</h3>");
  else {
    cadastros = JSON.parse(cadastros);
    cadastros.forEach(cadastro => {
      document.write("<ul>");
      document.write("<li>Código de Registro: " + cadastro.register + "</li>");
      document.write("<li>Nome do Pet: " + cadastro.name + "</li>");
      document.write("<li>Tipo do Pet: " + cadastro.type + "</li>");
      document.write("<li>Idade do Pet: " + cadastro.age + "</li>");
      document.write("</ul><p></p>");
    });
  }
}

No final podemos limpar o objeto localStorage esvaziando os campos, chamando a função vinculada ao button passando seu id como parâmetro.
function limparStorage(limpar){
  localStorage.clear(limpar);
  window.location = window.location;
}


Além disso, é possível ver essas informações no próprio navegador seguindo esses passos: 
Com o projeto aberto, clique com o botão direito em Inspecionar / Selecione a aba Application;
Logo abaixo e do lado esquerdo abriu-se um painel, e você vai perceber que tem uma seção chamada Local Storage. Clique na seta para baixo para abrir a opção e verá a URL que é ref. ao sistema. Ele vai exibir ao lado as informações, repare na chave/key e valor/value e abaixo todos cadastros realizados (caso tenha feito algum). 


Links para enriquecer os conhecimentos:

1. LocalStorage
https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API
https://developer.mozilla.org/pt-BR/docs/Web/API/Storage
https://www.w3schools.com/html/html5_webstorage.asp
https://www.w3schools.com/jsref/prop_win_localstorage.asp
https://www.horadecodar.com.br/2020/07/21/como-salvar-um-objeto-na-localstorage/
https://tableless.com.br/guia-f%C3%A1cil-sobre-usar-localstorage-com-javascript/

2. Json.parse
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

3. JSON.stringify
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

4. ForEach
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach



Bom aqui eu finalizo o desenvolvimento dessa parte inicial do mini sistema.
A experiência foi surpreendente pra mim em poder estudar, analisar as funcionalidades, fazer pequenas alterações, inclusões e mesmo sendo breve, amei esses pequenos passos que consegui dar, e isso me deu mais gás para continuar estudando e praticando. Como comentei no início, sou estudante de programação (iniciante) e espero que esses artigos tenham sido de grande valia não apenas para mim, mas também para alguns dos que visualizaram <3.
As próximas etapas serão contínuas em seguir praticando javaScript e voltarei aqui para compartilhar novas experiências sempre que possível.


GitHub do projeto:
https://github.com/fegoncalves/petshop-sistem

Página do projeto:
https://fegoncalves.github.io/petshop-sistem/

Se quiser o formulário simples, pode vê-lo e copiar aqui no codePen:
https://codepen.io/fegoncalves/pen/gOwRQBq



Quer acompanhar esse projeto desde início? Acesse os endereços:
Mini sistema de cadastro de pets (acesso através do localStorage)

Parte 6 - Estilização das páginas e responsividade
https://bit.ly/3pL5dMv

Parte 5 - Construção do layout (consultar.html)
https://bit.ly/2X9wYC3

Parte 4 - Construção do layout (consulta.html)
https://bityli.com/Ow8tU

Parte 3 - Construção do layout (index.html)
https://bityli.com/RgjWK

Parte 2 - Estrutura básica do nosso HTML
https://bityli.com/3ibcb

Parte 1 - Introdução
https://bityli.com/mIkjd


Até+ <3


2
84

Comentários (2)

0
Fernanda Oliveira

Fernanda Oliveira

05/01/2021 19:17

Oi Julio, obrigada!

0
Julio Lima

Julio Lima

05/01/2021 18:27

Muito bom.

Futura dev full stack <3

Brasil