Web Storage você sabe o que é?

O  Web Storage é de fundamental importância no desenvolvimento pois ele substitui os cookies no armazenamento de dados no navegador. Bem como é mais seguro e mais recomendado que os cookies do navegador.

Já faz alguns anos que o Web Storage existe, ele surgiu junto com HTML5 que trouxe várias novidades para as aplicações web. Todavia hoje a maioria dos programadores com mais experiência não conhecem e não sabem seus benefícios.

Antigamente usava os cookies e os sites tinham dificuldade de armazenar dados no navegador por causa da limitação de 5mb e o envio dos dados no header em cada requisição com servidor. Aí estava o maior problema dos cookies os dados cruzavam na rede podendo expor os dados dos usuários.

Contudo os cookies estão em desuso e sua depreciação está sendo estudada para futuras versões dos navegadores. Contudo, hoje você ainda consegue usar os cookies para rastrear usuários e salvar informação no navegador a partir do servidor.

Como funciona o Web Storage API

A API storage possui 2 classes principais a localStorage e a sessionStorage  ambas as  classes possuem as mesmas funções mas funcionam de forma diferente uma da outra.

A Classe sessionStorage é usada para manter  dados enquanto a página estiver aberta, quando a página for fechada todos os dados salvos são apagados. Por exemplo de uso dessa classe é salvar carrinhos de compras, página de configuração, sessões com dados sigilosos, checkout e etc.

Enquanto que a classe localStorage os  dados são permanentes são apagados manualmente pelo usuário ou quando aplicação executar uma das funções que removem dados. Nesse sentido os exemplos de informações salvas estão o JWT, id do usuário, data que o usuário executou alguma ação e etc.

Web Storage Funções

As classes do Web Storage têm 4 funções e funciona baseando em chave/valor. Lembrando que essas funções funcionam para as 2 classes.

setItem(key, value)

Esta função é usada para adicionar itens no Web Storage.

sessionStorage.setItem(“animal”,”cachorro”); // Salva cachorro com key animal.

getItem(key)

Esta função retorna o valor  salvo na key.

localStorage.getItem(“animal”); // Retorna  key animal.

removeItem(key)

Esta função remove a chave que tem o nome key.

sessionStorage.removeItem(“animal”); // Remove  key e valor com com key  animal.

clear()

Esta função remove todos os dados salvos na storage.

localStorage.clear(); //  Limpa todos os dados

Conclusão

Em síntese o Web Storage veio pra substituir os cookies que em breve será descontinuado pelos navegadores. Logo todo programador web deve aprender a usar esse recursos suas vantagens e suas variações.