-
Em um mundo cada vez mais conectado,
nós desenvolvedores às vezes esquecemos
-
que o usuário pode não ter acesso
aos dados naquele momento.
-
Então, fazemos uso de tecnologias
locais do dispositivo do usuário
-
para armazenar os dados.
-
Algumas delas,
no cenário de desenvolvimento web,
-
são o localstorage, sessionstorage
e alguns tipos de bases de dados
-
como IndexedDB e Web SQL.
-
Entretanto, esses dois últimos
nem sempre estão disponíveis.
-
Então, é bom que sempre verifiquemos
qual é o target, o alvo do nosso público,
-
e quais os dispositivos
que eles estarão utilizando,
-
para verificar se podemos utilizar
uma tecnologia ou outra.
-
Lembrando sempre de fazer uso do site
caniuse.com para verificar se a tecnologia
-
também está disponível naquela versão
do dispositivo.
-
Vamos dar uma olhada aqui na aplicação.
-
Temos uma aplicação que realiza
uma requisição a um web service
-
coletando informações do CEP
que o usuário digitou.
-
Nesse momento, vamos fazer uma verificação
no localstorage para o item do CEP.
-
Caso o usuário tenha armazenado localmente
algum CEP já pesquisado,
-
vamos retorná-lo para o validador dos dados.
-
Então, preenchemos os dados com aqueles
que já estão armazenados.
-
Caso não, vamos fazer a coleta
dos dados na API via Fetch,
-
coletamos a informação num formato JSON
e salvamos localmente no nosso storage.
-
Então, nosso localstorage é utilizado aqui
para salvar o valor do CEP.
-
Pessoal, uma coisa importante sempre
que utilizar o localstorage e o sessionstorage
-
é formatar o seu dado, o seu objeto, no caso,
para uma string ou número,
-
são os dois tipos de dados possíveis
de serem armazenados nesse local.
-
Aqui vemos esse objeto, o JSON,
sendo transformado em uma string
-
por meio da classe JSON.stringify.
-
Voltando aqui na recuperação dos dados,
os vemos sendo transformados
-
em objeto novamente
e com os dados preenchidos.
-
Nosso método de preenchimento
apenas coleta esses dados
-
e dá o input em cada um
dos elementos específicos.
-
Vamos olhar no navegador
como essa aplicação funciona.
-
Já a estou rodando aqui
com o cordova run browser.
-
Temos o nosso inspetor web aberto.
-
Vamos realizar uma primeira requisição.
-
Eu vou utilizar um CEP válido.
Vamos pesquisar o valor.
-
Tivemos nosso retorno,
nosso objeto JSON está aqui visível.
-
E como inspecionamos
o que está salvo na aplicação?
-
Inspecionamos em aplication, localstorage,
aqui na lateral esquerda,
-
clicando no endereço.
-
Conseguimos observar que os dados
foram armazenados.
-
Temos o key CEP, hífen e o valor do CEP,
certo?
-
Então, vamos testar aqui como ele funciona
já com o armazenado.
-
Eu vou voltar ao network,
atualizar minha aplicação,
-
vejam que o dado continua permanente.
-
Se eu pesquisar o mesmo CEP,
-
ele não vai realizar uma requisição
de web, aqui no web service,
-
porém, ele vai coletar
os dados da storagelocal.
-
É interessante que utilizemos sempre
essa tecnologia para dar suporte ao usuário
-
quando ele estiver offline ou pelo 3G.
-
Então, temos aí vários cenários possíveis
para serem implementados.
