Como inserir / remover dados no sessionStorage de um navegador

A propriedade sessionStorage permite acessar um objeto tipo session Storage. A sessionStorage é similar ao localStorage, a única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionstorage tem os seus dados limpos ao expirar a sessão da página. A sessão da página dura enquanto o browser está aberto e se mantém no recarregamento da página. Abrir a página em uma nova aba ou nova janela irá gerar uma nova sessão, o que diferencia de como os cookies trabalham. Além disso, nunca utilize o sessionStorage para armazenar dados sensíveis.

Para fazer a remoção do atributo através da chave em que o objeto se encontra salvo no sessionStorage você pode consultar esta chave através da opção de ferramentas de desenvolvimento do navegador (botão F12) e consultar as chaves do sessionStorage disponíveis verificando na aba armazenamento (Firefox) ou na aba application (Chrome).

Para este exemplo estou utilizando o Firefox.

Quando salvamos um valor no sessionStorage, utilizamos a seguinte sintaxe:

sessionStorage.setItem('TESTE', 'abc123'); 

No exemplo acima estou supondo que está no console de um navegador web.

Desta forma, se desejamos resgatar um valor do sessionStorage, basta fazer o seguinte:

const a = sessionStorage.getItem('TESTE'); 
console.log(a);
//"abc123"

Desta mesma forma, seguindo este mesmo protocolo, podemos excluir uma chave do sessionStorage da seguinte forma:

sessionStorage.removeItem('TESTE');

Repare que no comando acima eu estou explicitamente excluindo a mesma chave que utilizei para fazer o setItem que para o exemplo foi a chave 'TESTE'.

Desta forma (após executar a função de remover o item) ao tentar fazer um getItem para esta chave que eu excluí eu recebo o seguinte resultado:

const b = sessionStorage.getItem('TESTE');
console.log(b);
// null

Qualquer dúvida em relação ao sessionStorage, consulte a documentação.