API.txt

[00:00] Para trabalhar com armazenamento, vamos utilizar recursos que o próprio navegador oferece para nós. O navegador implementa diversas interfaces, diversas APIs que são interfaces que possuem diversos códigos, e cada um desses códigos possuem métodos e propriedades, e acessamos esses códigos com JavaScript. Usamos JavaScript, acessamos esses códigos e conseguimos montar a lógica que queremos da nossa aplicação.

[00:28] A API que vamos utilizar para armazenamento é a API de armazenamento que o navegador oferece. Vou clicar no mais no Google e vou colocar web storage API pt, já vai me dar a página traduzida da documentação.

[00:45] Sempre bom recorrer à documentação, de primeira pode ser que a documentação seja um pouco estranha e é normal buscarmos recursos um pouco mais facilitados, mais simples para podermos entender, mas é sempre bom voltar na documentação para ter certeza se entendemos os pontos que eles estão explicando aqui.

[01:06] Ele está falando que a API de armazenamento fornece mecanismos para que os navegadores possam armazenar dados através de chave e valor. Vamos armazenar dados dentro de um objeto, o objeto é uma coleção, onde conseguimos acessar conteúdo através de uma chave.

[01:24] Tenho uma chave, tenho uma caixa, com essa chave consigo abrir essa caixa e pegar o conteúdo que está lá dentro. Ele fala para nós que ele oferece duas maneiras de trabalhar com dado. Essa API de web storage tem dois objetos, o objeto de session storage e o objeto de local storage.

[01:43] Vamos ver como funcionam os dois e qual vamos escolher para utilizar durante todo o nosso projeto. Vou no VSCode, embaixo da lista appendChild vou primeiro acessar o session storage, para isso faço sessionStorage, ele já dá para mim o autocomplete.

[02:02] O que quero agora é pegar o que o usuário digitou e guardar no sessionStorage. Para isso vamos usar um método chamado setItem. Ele espera dois parâmetros, chave e valor. Tanto a chave quanto o valor tem que ser em formato de string, lembrando um objeto JSON.

[02:22] Vou chamar a chave de tarefas e o valor é o que o usuário digitou, ele escolheu a data e a tarefa, então vamos passar dados. Salvei. Vamos voltar no Chrome, no Ceep, colocar bola, escolher uma data, novo item.

[02:48] Vou abrir o console. Clico com o botão direito e vim no console. Vou clicar nos dois sinais de maior, no canto direito, e vou em application. Pode ver que está dividido em várias seções. Estão na seção de storage, quer dizer, tudo relacionado a armazenado. Tem local storage, session storage e as outras coisas que não vamos citar durante o curso, vamos utilizar só esses dois.

[03:16] No session storage clico e já abro o localhost. Repare que a chave, inclusive escrevi tarfas, vou arrumar isso. A chave e o valor, a chave foi o que escrevemos e o valor veio object object. Lembram que disse que chave e valor teriam que ser em formato de string? O que aconteceu aqui se voltarmos no VSCode, lembram que dados é um objeto.

[03:48] Voltando no Chrome, o compilador tentou fazer essa conversão de objeto para string, e como ele não conseguiu ele devolveu esse object object para nós. Esse é um aviso que o navegador mostra para nós sempre que tentarmos converter objeto para string.

[04:06] Vamos voltar no Chrome, no VSCode, e ver como resolvemos esse problema. Eu disse que o session storage espera chave e valor, que lembra bastante um formato JSON. JSON lembra um objeto JavaScript, tanto que ele quer dizer JavaScript object notation, que a única diferença dele para um objeto JavaScript é que tanto a chave quanto o valor são em formatos string.

[04:35] Se viermos no Chrome, posso até colocar para vocês JSON mdn, ele vai abrir para mim que o objeto JSON contém métodos para parsing JavaScript object notation e conversão de valores. Então consigo acessar, o navegador implementa um objeto JSON justamente para converter objetos, matrizes, números.

[05:00] Ele consegue converter isso para string utilizando o método dele, que está mais para baixo, JSON.stringify. Ele vai retornar em formato de string. Vamos voltar no VSCode, em dados vamos fazer JSON.stringify, e como argumento do stringify passamos o dados. E vamos arrumar o tarfas, que é tarefas.

[05:34] Vamos voltar no Chrome, no Ceep, vou clicar em "Clear All", ele vai limpar o session storage para mim. Vou fechar o console, vou de novo colocar bola, escolher uma data, vou abrir de novo, ele já abriu direto no application, e reparem que está aqui tarefas, data, e a bola.

[05:55] Armazenamos o que o cliente digitou no navegador. Qual o problema do session storage? É o seguinte, vou atualizar. Reparem que sumiu a tarefa, não implementamos essa parte ainda, então era esperado, e reparem que os dados continuam aqui. Era isso que queríamos. Quando o usuário atualiza a página mantemos os dados.

[06:22] Precisamos pegar esses dados do session storage e colocar no corpo da nossa aplicação. Mas não é exatamente isso que acontece. Se eu copiar localhost e fechar minha aplicação, vou abrir de novo, vamos abrir o inspect. Sumiram os dados da tarefa chave e valor.

[06:45] O session storage faz o que o nome já diz. Ele armazena dados enquanto a sessão estiver aberta. Enquanto o navegador estiver aberto, ele vai manter os dados. Só que se eu fechar, desligar o computador, os dados vão sumir. Mas o que queremos é que o usuário seja responsável por deletar a tarefa, e não ele fechar o navegador e aquela tarefa sumir.

[07:11] Vamos ver como podemos resolver esse problema com o localStorage.
APIs

API é um termo que as pessoas que trabalham com desenvolvimento utilizam todos os dias, mas você sabe o que é?

Eu citei que conseguimos acessar métodos do navegador através de interfaces, e elas são as famosas APIs (Application Programming Interfaces), que são construções disponíveis nas linguagens de programação e permitem a desenvolvedores/as criar funcionalidades complexas mais facilmente.

A documentação da Mozilla explica de forma clara o que é uma API:

“Pense no seguinte exemplo: o uso de energia elétrica em sua casa ou apartamento. Quando você deseja utilizar um eletrodoméstico, você precisa somente ligar o aparelho na tomada. Não é preciso conectar o fio do aparelho diretamente na caixa de luz. Isso seria, além de muito ineficiente, difícil e perigoso de ser feito (caso você não seja eletricista).

APIs de navegadores: fazem parte do seu navegador web, sendo capazes de expor dados do navegador. Essas construções abstraem o código mais complexo, proporcionando o uso de sintaxes mais simples em seu lugar, semelhante ao que o moment.js faz, simplificando o trabalho com datas.

A linguagem JavaScript, especialmente client-side, possui diversas APIs disponíveis. Elas não fazem parte da linguagem em si, mas são escritas sobre o core da linguagem JavaScript, fornecendo superpoderes para serem utilizados em seu código.”



https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Introduction


localStorage.setItem('tarefas', JSON.stringify (dados))

Exatamente! O jeito correto de transformar os dados em string é através do JSON.stringify e já aproveitamos para usar o setItem para armazenar os dados localmente