WebStorage – Armazenando sessões no JavaScript

1. Encontre seu código
›
2. JavaScript
›
3. WebStorage – Armazenando sessões no JavaScript

---

Aprenda a utilizar esse poderoso recurso em JavaScript! Assim como as localStorages as SessionStorage funcionam armazenando dados no navegador. A única diferença entre as duas, é que em localStorages as variáveis são compartilhadas com a mesma origem (window.location.origin). Já as SessionStorage, funcionam apenas na mesma página enquanto ela estiver aberta.

Ou seja, se você precisa de um dado apenas quando a página estiver aberta, você deve usar o SessionStorage.

Exemplos:

• Armazenamento de vaga / ingresso por determinado tempo.
• Variáveis locais de processamento no front da página (O editor gutenberg faz isso).
• Volume do vídeo sendo executado.

Todos usos das localStorage e sessionStorage, podem ser feitos com um programa em JavaScript, ou seja, podem ser criadas variáveis let / const em um script e você administrar elas nele, mas, a questão é que se salvarmos no navegador teremos uma variável de acesso global.

Vantagens nas sessionStorages e localStorage

Em programas mais sofisticados em JavaScript, criamos objetos ou classes e utilizamos esses como componentes separados, ou seja, criamos um arquivo para cada especificação do nosso software e acoplamos esse código (em objetos ou classes). Com isso, apenas realizamos chamadas desses scripts. (Você pode entender o que acabei de explicar em Objetos no JavaScript).
Isso faz com que se declararmos um valor universal em uma variável, fica bastante complicado administrá-lo, já que ele deverá ser declarado fora dos escopos de código (para ser uma variável universal), ainda teríamos uma confusão quando fossemos alterar os valores dessa variável universal.

Imagine que você criou vários scripts separados para uma aplicação e uma variável universal, mas, em um script, você modifica a variável, porém, em outro, você precisa chamar essa variável, no futuro, talvez você nem se recorde mais de onde essa variável vem e irá perder muito tempo interpretando todo script.
Logo para resolver isso, a melhor maneira e organizada, seria criar um componente para a SessionStorage e localStorage e assim, podermos manipula-lo em qualquer local da aplicação, o que deixa nosso código mais claro e mais específico, no caso, criando um objeto ou uma classe para ele. (Explicado no final do artigo).

Criando uma sessionStorage

Para se criar uma sessionStorage, basta digitar:

sessionStorage.volume = '4';

ou

sessionStorage.setItem('volume','4');

Lendo a sessionStorage

Para ler todas a sessionStorage, basta digitar:

sessionStorage

Caso você deseje uma específica, apenas digite:

sessionStorage.getItem('volume');

ou

sessionStorage.volume;

Sempre realize os testes desse comando no console do navegador. Assim você pode aprender e testar ao mesmo tempo.

Deletando uma sessionStorage

Você pode deletar alguma sessionStorage:

delete sessionStorage.volume;

ou

sessionStorage.removeItem('volume');

Ou até remover todas sessionStorages:

sessionStorage.clear();

Faça apenas isso caso você tenha o domínio de todas as sessões salvas no domínio.[

Curiosidade sobre SessionStorage no JavaScript

Você pode ter pensando o seguinte, se delete sessionStorage.nome_da_propriedade deleta a minha propriedade, eu poderia usar o exemplo abaixo?

delete sessionStorage;

Se você usar o exemplo abaixo, você irá destruir a função sessionStorage. A função delete funciona quando chamada com alguma propriedade por que estamos falando para o navegador apagar da memória ram aquele espaço com a referência, pois, é isso que o comando delete faz. Mas se fizermos isso na sessionStorage sozinha, estamos falando para o JavaScript remover da memória a sessionStorage em sí, por isso existe o comando clear();

Entendeu a diferença entre chamar clear() e o delete?

O clear é uma função dentro de sessionStorage, logo, eu não estou deletando o objeto em sí. Estou chamando uma função dentro dela. Já o delete, apaga o que eu mandar, por isso quando apagamos referências criadas, isso da certo.