LocalStorage.txt

LocalStorage

[00:00] Parabéns por ter concluído mais um curso conosco na Alura. Se viermos no VSCode vamos poder ver que fizemos muita coisa durante este curso, aprendemos vários conceitos. A primeira coisa, utilizamos novamente separação de responsabilidade, criamos uma função responsável pela criação dos itens, a função que pega os dados que o usuário preenche.

[00:22] Temos um componente responsável pela visualização, ele que vai montar como vão ser exibidos os dados do localStorage na tela. Falando em localStorage, tínhamos essa dificuldade no nosso projeto que quando dávamos F5 os dados sumiam, então tínhamos que armazenar eles em algum lugar. Aprendemos a utilizar essa API de armazenamento do próprio navegador. Não usamos nada externo.

[00:50] Utilizamos o localStorage. Também vimos que existe o session storage, mas ele não funcionaria do jeito que queremos, porque quando fechamos o navegador ele perde todos os dados e queríamos que a própria pessoa fosse responsável por deletar a tarefa.

[01:05] Aprendemos que para colocar itens no localStorage utilizamos setItem, para pegar os itens do localStorage usamos getItem. Vimos também que estávamos passando dados dentro de um objeto, passávamos o objeto dentro de localStorage. E aprendemos que localStorage aceita chave valor em formato de string.

[01:25] Tivemos que utilizar o objeto JSON, utilizando essa propriedade stringify, que vai converter o objeto em string para ser aceito. Quando formos pegar esses dados de volta, temos que fazer essa transformação novamente, então utilizamos o parse para pegar as strings e voltar ao formato original. Fizemos essa modificação.

[01:51] Em services criamos um algoritmo, temos um array vazio, fazemos uma verificação no localStorage para ver se aquela data foi repetida. Utilizamos um indexOf para fazer toda a verificação e filtrar as datas repetidas para elas não serem mais exibidas na tela.

[02:06] Fizemos também um algoritmo de ordenação, então utilizamos o sort, vimos na documentação como o sort funciona. É legal sempre olharmos a documentação, mesmo que não entendamos no começo, depois sempre voltando para criar uma musculatura para sempre buscar a documentação para resolver nossos problemas.

[02:28] Utilizamos aqui uma estratégia do moment. Transformamos aquela data, tiramos a barra, colocamos somente o número para conseguirmos fazer essa subtração e ter o resultado do menor para o maior.

[02:44] Outra coisa que fizemos aqui, criamos outros componentes, temos um componente criaData, que utilizamos o diff também para fazer essa subtração de datas, para não ter data repetida, e criamos de novo, continuamos com nossa arquitetura de módulos. Criamos vários módulos, utilizamos export, import.

[03:05] Tudo isso para conseguir implementar as funcionalidades que foram pedidas para nós no nosso aplicativo. Se voltarmos no Chrome coloco uma tarefa comprar bolo, coloco uma data, e ele aparece para mim a data em cima, o horário junto com a tarefa, o botão de concluir está mantendo estado, então criamos uma variável que começa como verdadeira.

[03:33] Alternamos o estado dessa variável para falso. Também no VSCode, se voltarmos aqui, no deletarTarefa também utilizamos do splice para remover todo o item do localStorage.

[03:50] Vimos muita coisa, vocês adicionaram várias ferramentas à sua caixa de ferramentas e tenho certeza de que quando vocês precisarem daquela ferramenta exata vocês já vão ter, já vão saber utilizar. Uma outra coisa é sempre tentem rever o conteúdo do curso, se possível.

[04:08] Daqui uma ou duas semanas tenta dar uma olhada para manter o conhecimento sempre fresco na mente. Caso vocês gostarem, compartilhem nas redes sociais, no LinkedIn, pode nos marcar, sem problemas. Qualquer dúvida não deixem de perguntar no fórum, e até a próxima.