JS na Web: Armazenando dados no navegador

Trabalhando com datas - Apresentação

Olá, meu nome é Felipe Nascimento e eu convido vocês a fazerem mais um curso de JavaScript aqui na Alura. Esse curso é a continuação do curso de JavaScript manipulando o DOM. Lá naquele curso criamos o Ceep, que é um programa de notas, disponibilizamos essa aplicação para algumas pessoas testarem e recebemos os feedbacks.

Em cima desses feedbacks criamos novas funcionalidades. Vocês podem perceber que temos um componente que quando clico no canto direito ele abre para mim um calendário com a opção de escolha de horário. Vamos implementar também outras mudanças, por exemplo, quando digito comprar um pão, escolho a data, por exemplo uma data aleatória com qualquer horário, clico em novo item.

Reparem que a data ficou em cima, embaixo temos a tarefa e o horário que escolhemos aquela tarefa. Antes tínhamos chumbado só a data e a tarefa. Outra coisa que também implementamos é se eu quiser fazer uma nova tarefa, nesse mesmo dia, dia 01/10, além de comprar pão vou comprar leite. Quando clico em novo item reparem que ele veio para baixo, não criou um novo bloco com uma nova data.

Separamos as datas. Por exemplo, se eu quiser comprar bolo, no próximo dia, no dia 02, quando clico em novo item, ele gera para mim uma nova tarefa no dia 02 e o horário comprar bolo.

Fizemos essa separação, criamos um filtro. Como fizemos isso? No VSCode criamos um arquivo dentro da pasta service chamado data.js. Aqui dentro criamos alguns algoritmos, o algoritmo de ordenação, criamos um algoritmo para filtrar. Então vamos filtrar as datas repetidas. Vamos manipular bastante arrays durante este curso.

Outra coisa que foi muita pedida para nós também era manter esses dados em algum lugar, então na outra aplicação se eu desse F5 sumiam todos os dados. Agora quando clico F5, os dados permanecem. Posso até copiar o localhost, vou fechar a aplicação, abrir ela de novo, reparem que ele mantém os dados mesmo quando encerro a sessão do navegador.

Vamos aprender isso, voltando no local storage vamos criar, vamos aprender a trabalhar com local storage. Vamos trabalhar com a API de armazenamento do navegador, vamos conhecer essa session storage e local storage, e vamos aprender a fazer manipulações para pegar os dados que vamos armazenar no local storage e exibir na página.

Tudo isso para nossa aplicação ficar mais robusta. Espero vocês na próxima aula.

Trabalhando com datas - Campo nova data

Vamos dar continuidade à nossa aplicação, o Ceep. Tínhamos construído ele no outro curso, então criamos aqui várias funcionalidades, tivemos que percorrer a árvore do DOM, fizemos algumas manipulações de elementos e conseguimos chegar até aqui.

O que temos hoje nessa aplicação? Consigo preencher uma tarefa, comprar uma bola, quando clico novo item ele aparece para mim a tarefa que criei junto com dois botões, concluir e deletar. Se clico em concluir vai dar um riscado para indicar que a tarefa foi concluída e se clicar em deletar ele vai sumir com toda a tarefa, que era um li.

Demos essa aplicação para algumas pessoas testarem e elas recomendaram algumas funcionalidades que elas gostariam que tivesse nessa aplicação para que ela pudesse ser melhor aproveitada. Elas pediram que tivesse data, ou seja, quando eu digitar comprar uma bola, as pessoas querem que tenha uma data para saber quando foi que elas criaram essa tarefa.

Além da data, para ter um controle mais fino ainda das tarefas eles pediram também horário. Então, data e horário junto com a tarefa. Uma outra coisa foi persistir essa tarefa em algum lugar, ou seja, armazenar ela em algum lugar, porque atualmente o que está acontecendo é o seguinte.

Temos a tarefa pronta, se eu atualizar o navegador some. Ou seja, essa tarefa só está aqui no momento em que essa página está aberta. A partir do momento em que eu recarrego a página ou fecho a página e abro novamente, essa tarefa some. Então a função de deletar uma tarefa tem que ser só do usuário e não quando o navegador fecha.

Vamos começar implementando a primeira tarefa, que é trabalhar com datas. Vou abrir meu VSCode, ele já está aberto com o projeto. O projeto está rodando no localhost, tínhamos instalado o live server no nosso VSCode para rodar o projeto.

A primeira coisa que vou fazer é clicar no index.html e lá embaixo, depois do input, que é onde o usuário digita a tarefa, então dentro do form, vou criar um novo input. Esse novo input vai ser o que o usuário vai escolher a data e a hora. Ele já vem preenchido o tipo como texto, mas não vai ser um texto, vai ser um datetime-local.

Esse datetime-local já é um componente html que vai aparecer para nós um calendário com um relógio de doze horas am/pm. Posso selecionar um horário e ele preenche automaticamente para mim a data e o horário aleatório aqui.

Se eu colocar mais uma tarefa, comprar uma bola, não apareceu a data porque ainda não trabalhamos com isso. Vamos ter que novamente percorrer o DOM e buscar esse input para pegar o valor dele. Como vamos fazer isso?

Vamos voltar no VSCode, aqui vou clicar no main.js e vamos primeiro percorrer a árvore do DOM. Vou criar uma const chamada calendário. Para percorrermos o documento é document.querySelector, estou indicando o que vou buscar. Repare que aqui em cima estamos usando o data-attributes, então estamos usando data-attributes para selecionar elementos html e classe, deixando somente para estilo.

Então, estamos separando responsabilidade. Voltamos no index.html e vou criar um data-attributes nesse input. Vou chamar ele de data-form-date. Vou copiar ele, voltar no main.js, e aqui é ’[data-form-date]’.

Vamos testar. Então, console.log(calendario). Volto no Chrome, vou digitar comprar uma bola e escolher uma data aleatória e um horário aleatório. Cliquei em novo item, apareceu a tarefa. Não apareceu horário ainda, mas fizemos o teste para aparecer no console.

Vou apertar F12 ou o botão direito e inspect, vou clicar em console. Conseguimos pegar o input todo. Mas não quero a tag. Quero o valor da tag. Tenho que pegar o que está dentro, o que o usuário escolheu. Para isso vamos ter que voltar no VSCode e vou criar uma const nova, vou chamar de data. Ela vai receber calendario.value, ou seja, o valor do input.

Vou copiar o data e ao invés de imprimir o console.log(calendario) vou imprimir a data. Volto no Chrome, vamos preencher de novo com comprar uma bola, vou escolher a data qualquer, novo item. Apareceu a data e o horário.

Repare que esse formato de data não é um formato que estamos acostumados a usar no Brasil, estamos acostumados com dia, mês e ano, aqui está ano, mês e dia. E o horário está certo. Apesar de estar 12h.

Uma curiosidade. Se eu abrir essa aplicação no Firefox, vou copiar o endereço do localhost, vou abrir o Firefox, colei, reparem que o input do Firefox é muito mais permissivo. Cada navegador escolhe, enquanto não chegam em um consenso, cada um implementa o que eles acham que é mais interessante para o usuário.

Se eu apertar F12 aqui no Firefox, vou escrever comprar uma bola, o Firefox permite que eu coloque, por exemplo, 15-02-2020 e 15:15. Quando clico em novo item, 15-02-2020. Posso criar uma outra comprar uma bola 2, e ao invés de traço quero barra. Ele permite que eu manipule do jeito que quero.

Vou voltar no Chrome. Recomendo vocês utilizarem o Chrome porque vai ser o navegador que vou utilizar durante todo o curso, então para manter essa paridade visual.

Nosso papel como desenvolvedor e desenvolvedora é padronizar, ou seja, quero que independente do que o usuário coloque como input, apesar de que dá para colocarmos dicas de como gostaríamos que ele preenchesse, nesse caso quero que independente do que ele escolha e esteja nesses moldes aqui, vou apresentar para ele no padrão que estamos acostumados no Brasil. Para isso vamos ter que aprender a trabalhar com datas, para padronizar essa exibição para o usuário.

Trabalhando com datas - Formatando a data

No mundo do desenvolvimento é comum utilizarmos bibliotecas que foram criadas por outras pessoas para resolver problemas nossos. Alguém resolveu aquele problema tantas vezes que ele encapsulou aquele código e ele abriu aquela solução para toda a comunidade, então posso usufrui desse código, não preciso ficar batendo a cabeça para descobrir como faço determinada coisa, posso simplesmente ir naquela biblioteca e executar uma outra função que já vou ter meu problema resolvido.

O que queremos aqui é padronizar as datas. Para nos auxiliar nessa tarefa vou utilizar a biblioteca chamada moment js. No Google vou digitar momentjs.com, ele vai abrir na página principal do moment, e se scrollarmos um pouco a página, descermos um pouco a página, ele já fala.

Eu executando o moment e chamando o método format, como parâmetro do format passo o jeito que quero que a data seja exibida, só isso. O que falta para nós é só instalar no nosso projeto essa biblioteca para que consigamos utilizar.

Vou utilizar um site chamado cdnjs.com. Aqui na barra de busca vou digitar moment, vai ser logo o primeiro mais buscado. Vou copiar esse link. A CDN é uma rede de distribuição de conteúdo. Tem servidores em diversos locais do mundo que possuem na memória esse determinado conteúdo, no nosso caso temos na memória esse código do moment, então quando formos utilizar esse servidor disponibiliza para nós o código.

Vamos voltar no VSCode. No index.html, lá embaixo, logo em cima do script do main.js vou criar outro script e dentro do source vou colocar o link que acabamos de copiar. Já podemos utilizar o moment no nosso projeto.

Como sei que está funcionando? Vou no main.js, temos a data, vou passar moment, do mesmo jeito que está na página do moment, passo um parâmetro para ele, o parâmetro que vou passar para o moment é calendario.value, e dentro do console.log que estou imprimindo a data vou chamar o método format, passando como parâmetro como quero que seja exibida a data.

Vou voltar no VSCode, data.format, e vou passar DD/MM/YYYY. Se eu voltar no Chrome, Ceep, vou digitar comprar uma bala, vou escolher uma data aleatória. É desse jeito que queremos que a data seja exibida.

No Firefox, vou copiar o localhost, colar, digitar comprar uma bala. Esse input está vazio, então temos que indicar para o usuário como quero que ele preencha essa data para assim o formato que escolhemos no moment ser aplicado aqui.

Vou voltar no VSCode, no index.html, logo no input do datetime-local vou colocar um placeholder. Entre aspas vou colocar o formato que quero que o usuário preencha. Então, preencha 2020-02-23. Salvei, vamos voltar no Firefox. Preencha, ano, mês e dia.

Vou colocar 2020-03-02, por exemplo. Novo item. Se eu abrir o console com F12 ou botão direito vai aparecer dia, mês e ano. Tranquilo. Vou utilizar o Chrome durante todo o curso, então recomendo também você utilizar o Chrome para mantermos uma paridade visual.

Vou fechar o Firefox, e agora vou voltar na aplicação, no main.js. Falta pegar essa data que já formatamos, pegamos o input do usuário, formatamos do jeito que queremos que seja exibida, e agora tenho que colocar essa data na tela. Como vamos fazer isso?

Sobre o curso JS na Web: Armazenando dados no navegador

O curso JS na Web: Armazenando dados no navegador possui 97 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Trabalhando com datas
• LocalStorage
• Renderizando a lista
• Ordenando as tarefas
• Finalizando o projeto