Na lição anterior, aprendemos sobre como trabalhar com localStorage e fomos brevemente apresentados ao sessionStorage. Lembre-se, que sessionStorage é quando os dados são apagados assim que o usuário fecha a aba ou janela na qual a aplicação web está sendo executada. É ideal para situações em que os dados precisam persistir apenas durante uma única sessão, como manter os dados do formulário durante a navegação ou armazenar informações temporárias de estado durante um processo de checkout. Assim como localStorage, sessionStorage usa pares chave-valor para armazenar e recuperar dados. Os métodos usados com sessionStorage são os mesmos que com localStorage, com a única diferença real sendo por quanto tempo os dados são armazenados. Aqui estão alguns exemplos de como trabalhar com os diferentes métodos:

• sessionStorage.setItem(): Armazena um par chave-valor em sessionStorage.

sessionStorage.setItem('cart', '3 items');

• sessionStorage.getItem(): Recupera o valor de uma chave específica do sessionStorage.

let cart = sessionStorage.getItem('cart');
console.log(cart); // Outputs: '3 items'

• sessionStorage.removeItem(): Remove um item específico de sessionStorage usando sua chave.

sessionStorage.removeItem('cart');

• sessionStorage.clear(): Limpa todos os dados armazenados em sessionStorage.

sessionStorage.clear();

Vamos ver um exemplo onde armazenamos dados em sessionStorage que duram apenas enquanto a aba ou janela do navegador estiver aberta:

// Store data in sessionStorage
sessionStorage.setItem('currentUser', 'JohnDoe');

// Retrieve the stored data
const user = sessionStorage.getItem('currentUser');
console.log(user); // 'JohnDoe'

// Remove a specific key from sessionStorage
sessionStorage.removeItem('currentUser');

// Clear all sessionStorage data
sessionStorage.clear();

Neste exemplo, nós: 1. Armazene o nome do usuário atual (JohnDoe) em sessionStorage. 2. Recupere e exiba. 3. Remova o item associado à chave currentUser. 4. Limpar todos os dados de sessionStorage. A principal diferença em relação ao localStorage é que assim que o usuário fecha a aba, todos os dados da sessão armazenados serão perdidos. sessionStorage é particularmente útil em cenários como:

• Armazenando dados temporários como entradas de formulário durante um processo de formulário de várias páginas.
• Armazenar seleções temporárias ou preferências que não precisam persistir entre sessões.
• Manter o estado em uma aplicação de página única que não precisa ser lembrado depois que a aba é fechada.

sessionStorage garante que, uma vez que o usuário sai da página, os dados da sessão sejam apagados, o que é ótimo para cenários onde você não quer manter informações além da sessão atual.