Resumo : neste tutorial, você aprenderá como usar JavaScript sessionStorage
para armazenar dados apenas para uma sessão.
Introdução ao armazenamento de sessão JavaScript
O sessionStorage
objeto armazena dados apenas para uma sessão. Isso significa que os dados armazenados no sessionStorage
serão excluídos quando o navegador for fechado.
Uma sessão de página dura enquanto o navegador da Web estiver aberto e sobreviver à atualização da página.
Quando você abre uma página em uma nova guia ou janela, o navegador cria uma nova sessão.
Se você abrir várias guias ou janelas com o mesmo URL, o navegador da Web criará um separado sessionStorage
para cada guia ou janela. Portanto, os dados armazenados em uma guia do navegador não podem ser acessados em outra guia.
Quando você fecha uma guia ou janela, o navegador encerra a sessão e limpa os dados no arquivo sessionStorage
.
Os dados armazenados no sessionStorage
são específicos do protocolo da página. Por exemplo, o mesmo site tutorials.acervolima.com
tem diferenças sessionStorage
ao acessar com o http
e https
.
Como os sessionStorage
dados estão vinculados a uma sessão do servidor, eles só ficam disponíveis quando uma página é solicitada de um servidor. O sessionStorage
não está disponível quando a página é executada localmente sem um servidor.
Como the sessionStorage
é uma instância do Storage
tipo, você pode gerenciar dados usando os métodos do Storage:
setItem(name, value)
– definir o valor para um nomeremoveItem(name)
– remova o par nome-valor identificado pelo nome.getItem(name)
– obtenha o valor para um determinado nome.key(index)
– obtenha o nome do valor na posição numérica fornecida.clear()
– remova todos os valores no arquivosessionStorage
.
Gerenciando dados no sessionStorage JavaScript
1) Acessando o sessionStorage
Para acessar o sessionStorage
, você usa a sessionStorage
propriedade do window
objeto:
window.sessionStorage
Linguagem de código: JavaScript ( javascript )
Como the window
é o objeto global , você pode simplesmente acessar sessionStorage
assim:
sessionStorage
2) Armazenando dados no sessionStorage
O seguinte armazena um par nome-valor no sessionStorage
:
sessionStorage.setItem('mode','dark');
Linguagem de código: JavaScript ( javascript )
Se sessionStorage
tiver um item com o nome de mode
, o setItem()
método atualizará o valor do item existente para dark
. Caso contrário, irá inserir um novo item.
3) Obtendo dados do sessionStorage
Para obter o valor de um item por nome, você usa o getItem()
método. O exemplo a seguir obtém o valor do item ‘ mode
‘:
const mode = sessionStorage.getItem('mode');
console.log(mode); // 'dark'
Linguagem de código: JavaScript ( javascript )
Se não houver nenhum item com o nome mode
, o getItem()
método retornará null
.
4) Removendo um item por um nome
Para remover um item pelo nome, você usa o removeItem()
método. O seguinte remove o item com o nome de 'mode'
:
sessionStorage.removeItem('mode');
Linguagem de código: JavaScript ( javascript )
5) Iterando sobre todos os itens
Para iterar todos os itens armazenados no sessionStorage
, siga estas etapas:
- Use
Object.keys()
para obter todas as chaves dosessionStorage
objeto. - Use
for...of
para iterar sobre as chaves e obter os itens por chaves.
O código a seguir ilustra as etapas:
let keys = Object.keys(sessionStorage);
for(let key of keys) {
console.log(`${key}: ${sessionStorage.getItem(key)}`);
}
Linguagem de código: JavaScript ( javascript )
6) Excluindo todos os itens do sessionStorage
Os dados armazenados no sessionStorage
são excluídos automaticamente quando a guia/janela do navegador da web é fechada.
Além disso, você pode usar o clear()
método para excluir programaticamente todos os dados armazenados no arquivo sessionStorage
.
sessionStorage.clear();
Linguagem de código: CSS ( css )
Por que armazenamento de sessão JavaScript
O sessionStorage
tem muitas aplicações práticas. E os seguintes são os mais notáveis:j
- O
sessionStorage
pode ser usado para armazenar o estado da interface do usuário do aplicativo da web. Posteriormente, quando o usuário retornar à página, você poderá restaurar a interface do usuário armazenada no arquivosessionStorage
. - O
sessionStorage
também pode ser usado para passar dados entre páginas em vez de usar campos de entrada ocultos ou parâmetros de URL.
Aplicativo de armazenamento de sessão JavaScript
Você criará um aplicativo da web simples que permite aos usuários selecionar o modo, escuro ou claro. Por padrão, ele possui um modo claro. E você usará o sessionStorage
para lembrar o modo quando a página for atualizada.
Se você atualizar a página, o modo selecionado será restaurado, pois está armazenado no arquivo sessionStorage
.
No entanto, se você fechar a guia ou janela, a página será redefinida para o dark
modo padrão.
1) Criando a estrutura de pastas do projeto
Primeiro, crie uma nova pasta chamada session-storage
. Na session-storage
pasta, crie duas subpastas: js
e css
que armazenará os arquivos JavaScript e CSS.
Segundo, crie um novo index.html
na sessionStorage
pasta, o app.js
arquivo na js
pasta e style.css
o arquivo na css
pasta.
2) Construindo a página HTML
O seguinte mostra a index.html
página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript sessionStorage Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>JavaScript sessionStorage Demo</h1>
<p>Click the button to switch to the dark/light mode.</p>
<p>Refresh the page to check if the mode is saved.</p>
<a id="theme-switcher" class="btn"></a>
</div>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Neste index.html
arquivo, colocamos na style.css
seção head e app.js
na seção body.
A página possui alguns elementos. O mais importante é o botão com o id theme-switcher
.
3) Criando arquivo app.js
Primeiro, declare duas constantes que serão usadas como rótulo do butotn:
const MOON = '🌙';
const SUN = '☀️';
Linguagem de código: JavaScript ( javascript )
Você usará o SUN
como rótulo do theme-switcher
botão no modo escuro e MOON
no modo claro.
Segundo, declare três constantes para os modos escuro, claro e padrão:
const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = DARK_MODE;
Linguagem de código: JavaScript ( javascript )
Terceiro, selecione o botão theme-switcher
usando querySelector()
:
const btn = document.querySelector('#theme-switcher');
Linguagem de código: JavaScript ( javascript )
Quarto, defina uma nova função setMode()
para alterar o modo:
function setMode(mode = DEFAULT_MODE) {
if (mode === DARK_MODE) {
btn.textContent = SUN;
document.body.classList.add(DARK_MODE);
} else if (mode === LIGHT_MODE) {
btn.textContent = MOON;
document.body.classList.remove(DARK_MODE);
}
}
Linguagem de código: JavaScript ( javascript )
No modo escuro, setMode()
altera o botão para SUN
e adiciona a DARK_MODE
classe ao elemento body
E no modo light, setMode()
altera o rótulo do botão MOON
e remove a DARK_MODE
classe do elemento body.
O seguinte mostra o CSS do modo light. A cor de fundo é branca e a cor do texto é preta:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
background-color: #fff;
color: #333;
line-height: 1.7;
transition: 0.2s ease-in-out;
padding: 20px;
}
Linguagem de código: CSS ( css )
No modo escuro, a cor de fundo é preta e a cor do texto é branca:
.dark {
background-color: black;
color: #fff;
}
Linguagem de código: CSS ( css )
Para mudar do modo claro para escuro, você adiciona a classe .dark ao elemento body e vice-versa.
Quinto, defina a init()
função que será executada quando a página for carregada:
function init() {
let storedMode = sessionStorage.getItem('mode');
if (!storedMode) {
storedMode = DEFAULT_MODE;
sessionStorage.setItem('mode', DEFAULT_MODE);
}
setMode(storedMode);
}
Linguagem de código: JavaScript ( javascript )
Nesta função, usamos o getItem()
método para recuperar o modo armazenado no arquivo sessionStorage
.
Caso sessionStorage
não possua o mode
item, a init()
função mudará a página para o modo padrão, que é o modo escuro. Caso contrário, ele será definido para o modo armazenado no arquivo sessionStorage
.
Sexto, anexe um manipulador de eventos click ao theme-switcher
botão:
btn.addEventListener('click', function () {
let mode = sessionStorage.getItem('mode');
if (mode) {
let newMode = mode == DARK_MODE ? LIGHT_MODE : DARK_MODE;
setMode(newMode);
sessionStorage.setItem('mode', newMode);
}
});
Linguagem de código: JavaScript ( javascript )
O manipulador de eventos click obtém o modo armazenado no sessionStorage.
Se o item de modo existir, ele alterna o modo. Em outras palavras, o modo claro passa a ser modo escuro e vice-versa.
Em seguida, ele usa o setItem()
método para atualizar o item de modo sessionStorage
para o novo.
O seguinte mostra um arquivo app.js completo:
const MOON = '🌙';
const SUN = '☀️';
const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = DARK_MODE;
const btn = document.querySelector('#theme-switcher');
init();
function init() {
let storedMode = sessionStorage.getItem('mode');
if (!storedMode) {
storedMode = DEFAULT_MODE;
sessionStorage.setItem('mode', DEFAULT_MODE);
}
setMode(storedMode);
}
function setMode(mode = DEFAULT_MODE) {
if (mode === DARK_MODE) {
btn.textContent = SUN;
document.body.classList.add(DARK_MODE);
} else if (mode === LIGHT_MODE) {
btn.textContent = MOON;
document.body.classList.remove(DARK_MODE);
}
}
btn.addEventListener('click', function () {
let mode = sessionStorage.getItem('mode');
if (mode) {
let newMode = mode == DARK_MODE ? LIGHT_MODE : DARK_MODE;
setMode(newMode);
sessionStorage.setItem('mode', newMode);
}
});
Linguagem de código: JavaScript ( javascript )
Primeiro, você seleciona um modo, por exemplo, modo de luz, sessionStorage
para salvá-lo.
Então, você atualiza a página. Ele mostrará o modo selecionado anteriormente.
Para visualizar os dados armazenados no armazenamento de sessão no navegador da web, clique na guia Aplicativo e selecione Armazenamento de Sessão:
Resumo
- O
sessionStorage
permite armazenar os dados apenas para a sessão. O navegador excluirá ossessionStorage
dados quando você fechar a guia ou janela do navegador. - The
sessionStorage
é uma instância doStorage
tipo, portanto, você pode usar os métodos do tipo Storage para gerenciar dados no arquivosessionStorage
.