Javascript: Como Usar o LocalStorage

O LocalStorage é um mecanismo de armazenamento de dados no estilo chave-valor, que permite que você guarde informações no navegador do usuário. Ele faz parte da API Web Storage, juntamento com o Session Storage (assunto para outro post). Com o LocalStorage, temos uma forma muito simples de armazenar dados para nos auxiliar em determinados comportamentos da nossa aplicação, tendo a vantagem de os dados permanecerem guardados mesmo que o usuário feche o navegador, mas não vá guardar dados sensíveis.

Existem apenas 4 métodos para manipular os dados com LocalStorage, que são realmente muito simples de manipular e entender como funcionam. Vale lembrar também que eles só agem com dados do domínio do seu site, ou seja, não é possível que você use isso para capturar dados que outros sites gravaram no navegador do cliente. Veja só como são simples.

localStorage.setItem() – esse método permite que guarde algum dado no navegador. Para isso, basta passar como parâmetros, primeiramente, a chave e depois o conteúdo dela, como no seguinte exemplo:

localStorage.setItem("idade", 39)

localStorage.getItem() – permite recuperar o item com a chave passada via parâmetro, ou seja, com esse método você pode consultar os dados salvos dentro de determinada chave. Veja o exemplo (muito difícil, não?):

let idade = localStorage.getItem("idade") // idade = 39

localStorage.removeItem() – esse método remove (exclui) o item cuja chave foi passada como parâmetro. Então, agora você já tem o suficiente para guardar, recuperar e excluir dados muito facilmente!

localStorage.removeItem("idade")

localStorage.clear() – por fim, com esse comando todos os dados do LocalStorage serão apagados.

Para ver todos os dados que estão gravados com LocalStorage por um determinado site, basta acessar as ferramentas de desenvolvedor do seu navegador, depois vá em Application -> LocalStorage (esse é o caminho em navegadores que usam motor Chromium). Dessa forma, você pode também conferir se seu código está funcionando corretamente.

Lembrando novamente: não guarde informações sensíveis com o LocalStorage. Esse recurso é apenas para coisas menores, por exemplo para personalizar a tela do usuário, ou coisas que você acha que não seria interessante gravar no servidor. Também pode ser usado para testes, em casos em que você não sabe ainda usar bancos de dados mas quer fazer uma aplicações interessante (por exemplo se estiver usando Cordova para algum app de forma que ele tenha alguma funcionalidade de guardar dados, apenas para praticar e aprender).