Sessão e armazenamento local são métodos de armazenamento do navegador que permitem armazenar dados ao lado de solicitações HTTP sem estado. Eles são uma alternativa ao armazenamento baseado em cookies e têm muitos usos no desenvolvimento da web.

Embora eles funcionem de maneira muito semelhante, existem diferenças significativas que você deve conhecer.

Armazenamento local e armazenamento de sessão: quais são seus usos?

O armazenamento local e de sessão são APIs JavaScript que você pode usar para armazenar dados no lado do cliente. Eles permitem que um site armazene dados no navegador e instrua o navegador a acessá-los posteriormente.

Dependendo de suas necessidades, você pode usar o armazenamento local ou de sessão para armazenar dados. Ambos os métodos de armazenamento são semelhantes aos cookies, mas sem as mesmas preocupações de privacidade em torno dos cookies. Portanto, a maioria dos sites modernos prefere usar apenas métodos de armazenamento na Web ou combiná-los com cookies como alternativa.

Ao contrário dos cookies, o armazenamento local e o armazenamento de sessão não enviam dados ao servidor por meio de cabeçalhos HTTP. Você deve usá-los apenas para a funcionalidade do lado do cliente.

Além disso, o armazenamento local e de sessão tem um limite de armazenamento de cerca de 5 MB por domínio. Eles fornecem mais armazenamento do que os cookies, que têm capacidade de apenas 4 KiB por cookie.

O que é armazenamento de sessão?

Uma sessão de navegação aproxima o seu uso de um site. Se você visitar um site, navegar um pouco e desligar o computador, pode pensar nesse tempo como uma única sessão. A configuração do seu navegador pode mudar isso de maneiras sutis, mas uma sessão visa representar o tempo que você interage com um site.

O armazenamento de sessão é exclusivo para cada guia do navegador. Se você abrir uma nova guia e navegar para o mesmo site, iniciará uma nova sessão com seu próprio armazenamento. No entanto, se você usar um recurso de "guia duplicada" em seu navegador, isso poderá reutilizar a mesma sessão. Você não pode confiar muito nos detalhes específicos de uma "sessão". Em vez disso, concentre-se no conceito principal: o armazenamento de sessão é temporário.

O armazenamento de sessão tem métodos de API integrados para trabalhar com dados de pares de chave/valor. Você pode armazenar dados de JavaScript igual a:

sessionStorage.setItem("chave", "valor");

E para recuperar o valor armazenado:

sessionStorage.getItem("chave");

Observe que ambos chave e valor são apenas tipos de string. Se você quiser armazenar um tipo diferente, precisará convertê-lo em uma string, explícita ou implicitamente.

O que é armazenamento local?

O armazenamento local mantém os dados em todas as instâncias de um site, estejam elas em diferentes guias ou janelas. Também é permanente, para que os dados não desapareçam quando você fechar o navegador.

Quando você abre um site que anteriormente usava armazenamento local, ele sempre terá acesso a esses dados armazenados.

Como desenvolvedor da Web, você pode usar esse mecanismo para reter dados sobre um usuário. Alguns sites podem usar isso para mantê-lo conectado ou fornecer uma experiência mais personalizada.

Assim como o armazenamento de sessão, você pode definir um objeto de armazenamento local com uma linha de código JavaScript:

localStorage.setItem("chave", "valor");

Para acessar o valor da chave:

localStorage.getItem("chave");

Observe que esses métodos funcionam da mesma maneira que o armazenamento de sessão, eles apenas usam um tipo diferente de armazenamento de dados.

Embora o armazenamento de sessão limpe os dados assim que a sessão terminar, a única maneira de limpar o armazenamento local é excluí-lo explicitamente. Ambos os tipos de armazenamento oferecem dois métodos para limpar os dados. O primeiro remove um item específico de dados com base em sua chave:

localStorage.removeItem("chave");

Você também pode remover todos os dados armazenados pelo seu site, independentemente de sua chave:

localStorage.clear();

Você pode saber mais sobre esses métodos de API de armazenamento na Web no javascript.info local na rede Internet.

Quando você precisa de armazenamento local?

Como o armazenamento local é persistente, é melhor reter os dados das visitas dos usuários. Se você deseja armazenar as preferências do site ou armazenar em cache dados de longo prazo, o armazenamento local é apropriado. Você pode não querer armazenar dados mais confidenciais usando armazenamento local, pois é permanente.

Como o armazenamento local e de sessão são métodos front-end, convém evitar usá-los para funções baseadas em servidor, como login de usuário. Você pode considerar os cookies como uma alternativa nesses casos.

Quando você precisa de armazenamento de sessão?

Se você deseja armazenar dados apenas enquanto um usuário interage com seu site, o armazenamento de sessão é ideal. Isso pode ser para armazenamento em cache de curto prazo ou dados de uso sobre uma visita específica ao seu site.

O armazenamento de sessão é melhor para armazenar informações mais confidenciais, pois expira.

Armazenamento local vs. Armazenamento de sessão: o que é mais seguro?

Como você viu, os métodos de armazenamento local e de sessão são semelhantes em muitos aspectos, mas ainda têm casos de uso personalizados. Você não deve considerar nenhum dos dois seguros, pois são tecnologias de front-end às quais o JavaScript tem acesso. No entanto, o armazenamento de sessão é muito conveniente e sua natureza temporária é reconfortante.

O armazenamento local é permanente, portanto, pode representar preocupações adicionais de segurança. Qualquer pessoa que abra um navegador pode, em teoria, acessar o armazenamento local. Você deve estar ciente como os ataques XSS funcionam e como preveni-los.

Armazenamento local ou armazenamento de sessão: qual você deve usar?

O armazenamento de sessão é um pouco mais seguro devido à sua natureza temporária. No entanto, sua escolha de método de armazenamento na web depende de seus requisitos. O armazenamento JavaScript é mais adequado apenas para uso do lado do cliente. Mas oferece um armazenamento de dados conveniente baseado em navegador e é muito fácil de usar.

Lembre-se de que, embora o armazenamento local armazene dados em várias guias, o armazenamento de sessão é exclusivo para cada guia, na maioria das vezes. Você deve garantir que seu aplicativo faça o mínimo possível de suposições e atenda a casos extremos.

Os cookies são uma forma mais antiga de persistência de dados, mas ainda são muito usados. Você pode querer verificá-los para os dados que você precisa transmitir para o servidor.