Armazenamento de sessão JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar JavaScript sessionStoragepara armazenar dados apenas para uma sessão.

Introdução ao armazenamento de sessão JavaScript

O sessionStorageobjeto armazena dados apenas para uma sessão. Isso significa que os dados armazenados no sessionStorageserã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 sessionStoragepara 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 sessionStoragesão específicos do protocolo da página. Por exemplo, o mesmo site tutorials.acervolima.comtem diferenças sessionStorageao acessar com o httpe https.

Como os sessionStoragedados estão vinculados a uma sessão do servidor, eles só ficam disponíveis quando uma página é solicitada de um servidor. O sessionStoragenão está disponível quando a página é executada localmente sem um servidor.

Como the sessionStorageé uma instância do Storagetipo, você pode gerenciar dados usando os métodos do Storage:

setItem(name, value) – definir o valor para um nome
removeItem(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 arquivo sessionStorage.

Gerenciando dados no sessionStorage JavaScript

1) Acessando o sessionStorage

Para acessar o sessionStorage, você usa a sessionStoragepropriedade do windowobjeto:

window.sessionStorageLinguagem de código:  JavaScript  ( javascript )

Como the windowé o objeto global , você pode simplesmente acessar sessionStorageassim:

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 sessionStoragetiver 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 do sessionStorageobjeto.
Use for...ofpara 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 sessionStoragesã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 sessionStoragetem muitas aplicações práticas. E os seguintes são os mais notáveis:j

O sessionStoragepode 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 arquivo sessionStorage.
O sessionStoragetambé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 sessionStoragepara 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 darkmodo padrão.

1) Criando a estrutura de pastas do projeto

Primeiro, crie uma nova pasta chamada session-storage. Na session-storagepasta, crie duas subpastas: jse cssque armazenará os arquivos JavaScript e CSS.

Segundo, crie um novo index.htmlna sessionStoragepasta, o app.jsarquivo na jspasta e style.csso arquivo na csspasta.

2) Construindo a página HTML

O seguinte mostra a index.htmlpá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.htmlarquivo, colocamos na style.cssseção head e app.jsna 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 SUNcomo rótulo do theme-switcherbotão no modo escuro e MOONno 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-switcherusando 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 SUNe adiciona a DARK_MODEclasse ao elemento body

E no modo light, setMode()altera o rótulo do botão MOONe remove a DARK_MODEclasse 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 sessionStoragenão possua o modeitem, 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-switcherbotã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 sessionStoragepara 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 )

Aqui está a aplicação final .

Primeiro, você seleciona um modo, por exemplo, modo de luz, sessionStoragepara 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 sessionStoragepermite armazenar os dados apenas para a sessão. O navegador excluirá os sessionStoragedados quando você fechar a guia ou janela do navegador.
The sessionStorageé uma instância do Storagetipo, portanto, você pode usar os métodos do tipo Storage para gerenciar dados no arquivo sessionStorage.

Armazenamento local JavaScript

JavaScript IndexadoDB