Saiba como e quando utilizar Local Storage e Session Storage

Local e Session Storage

Durante o desenvolvimento web é quase inevitável que teremos que salvar algumas informações para serem utilizadas em diversos locais da aplicação. Nome do usuário, carrinho de compras, idioma selecionado, token de autenticação, algum estado específico do nosso sistema etc. A maneira que escolhemos para guardar essas informações podem ser bem variadas de acordo com diferentes objetivos.

Principalmente utilizando frameworks modernos como React e Angular, que possuem estruturas e diferentes padrões para guardar informações na aplicação, a variedade de maneiras que temos para guardar estados é bem grande. Podemos salvar esses dados no backend e obtê-los sempre que necessário. Podemos utilizar services no Angular ou context no React. Podemos utilizar Redux ou ngRx. E podemos também utilizar Local Storage e Session Storage.

Local Storage e Sessions Storage são APIs fornecidas pelos navegadores que permitem que a gente armazene dados no navegador. Apesar de serem semelhantes, eles possuem algumas diferenças e são aplicáveis para casos diferentes. Porém, em ambos os casos, os dados possuem certa volatilidade. Utilizar um navegador diferente ou um dispositivo diferente, dependendo do caso, já não permitiria o acesso a estes dados. Portanto os dados salvos nessas APIs devem ser sempre dados que não tem muito problema se forem deletados dessas fontes ou estejam inacessível através delas. Mas vamos detalhar um pouco mais cada uma delas.

Local Storage

O objetivo do local storage é ser um armazenamento de dados permanente. Ou seja, os dados salvos ali continuam salvos mesmo após o usuário fechar a aba ou o navegador. Dependendo do navegador e do caso de uso, é até possível utilizar os dados salvos no local storage em outro dispositivo.

O local storage é mais recomendado para dados que não se alteram com muita frequência. Como exemplos de caso de uso podemos citar:

• Tema da interface do usuário
• Idioma preferido
• Nome e outros dados de usuário
• Opções salvas de formulários
• Filtros personalizados

A implementação do Local Storage é bem simples. Este Storage guarda as informações como chave valor. Então basta passar uma chave e um valor para salvar uma informação, e passar uma chave para obter uma informação.

Para salvar uma informação utilizamos o método setItem . Por exemplo:

localStorage.setItem("nomeUsuario", "Fulano de tal");

Para obter uma informação, utilizamos o método getItem .

const nomeUsuario = localStorage.getItem("nomeUsuario");

Podemos também remover uma informação do localStorage utilizando o método removeItem :

localStorage.removeItem("nomeUsuario");

Por fim, podemos também limpar todo o localStorage, utilizando o método clear :

localStorage.clear();

Importante destacar que o localStorage possui limite, em todos os browsers, de 5MB por origem.

Session Storage

O session storage é bastante parecido com o localStorage. A diferença é que aqui os dados são restritos somente a uma aba do navegador. Quando a aba, ou o navegador, é fechado, todos os dados so sessionStorage são limpos.

Para fazer uma analogia, vamos pensar o localStorage como uma grande praça de alimentação, onde o usuário pode sair de qualquer restaurante e ir para outro, mantendo todos os lanches que comprou neste restaurante. Já o session storage, você não pode levar o que comprou em um restaurante para outro estabelecimento. A informação fica restrita somente no local onde ele foi salva.

O sessions storage é mais recomendável para informações específicas daquela sessão do usuário. Alguns exemplos de uso são:

• Estados de formulário multipasso
• Mensagens de notificação temporários
• Estados de aplicação single-page (como joguinhos que, ao atualizar a página, o jogo é resetado ao estado inicial)

Do ponto de vista de segurança, os dados do Sesion Storage são mais restritivos, por serem acessíveis somente por aquela aba.

A implementação do Session Storage também é bem simples e bem similar à do Loca Storage. Este Storage também guarda as informações como chave valor. Então basta passar uma chave e um valor para salvar uma informação, e passar uma chave para obter uma informação.

Para salvar uma informação utilizamos o método setItem . Por exemplo:

sessionStorage.setItem("nomeUsuario", "Fulano de tal");

Para obter uma informação, utilizamos o método getItem .

const nomeUsuario = sessionStorage.getItem("nomeUsuario");

Podemos também remover uma informação do sessionStorage utilizando o método removeItem :

sessionStorage.removeItem("nomeUsuario");

Por fim, podemos também limpar todo o sessionStorage, utilizando o método clear :

sessionStorage.clear();

Importante destacar que o sessionStorage também possui limite, em todos os browsers, de 5MB por origem.

Conclusão

Os storages fornecidos pelos navegadores, apesar de simples e pequenos, podem ser bastante úteis no dia a dia do desenvolvimento web. Entender os casos de uso e suas características é importante para sabermos qual a melhor ferramenta usar para cada situação.

Lembrando que não existem uma única solução para todos os problemas. O importante é conhecer as diversas ferramentas e saber quando utilizar cada uma delas.

Se você chegou até aqui e gostou do artigo, por favor, bata palminha e comente aqui embaixo mais casos de uso em que você aplicaria estes Storages.