Como utilizar o localStorage e sessionStorage com JavaScript

Anderson Irias - 10/04/2021

No artigo de hoje, veremos como utilizar duas funcionalidades bem úteis no desenvolvimento Web com JavaScript, o localStorage e sessionStorage. Ambas servem para o armazenamento de dados no navegador, mas possuem algumas diferenças entre si. Vamos ver aqui o funcionamento e uso das duas.

localStorage

O localStorage nos permite armazenar dados nas sessões do navegador. Com ele podemos armazenar informações no navegador, que não serão apagadas quando o usuário fechar o navegador. Isto acontece devido ao local storage não possuir expiração.

Como utilizar o localStorage

O localStorage, possui algumas funções para a manipulação dos dados armazenados. Todas estas funções podem ser utilizadas com o JavaScript puro, nos navegadores que possuem suporte. Para adicionar dados temos o setItem().

localStorage.setItem('blogTitle', 'Irias Lab');

Acima estamos adicionando a chave blogTitle o valor: Irias Lab. Para ler os dados utilizamos o getItem().

const blogTitle = localStorage.getItem('blogTitle');

Para remover um dado armazenado no localStorage temos o removeItem()

localStorage.removeItem('blogTitle');

Já para remover todos os dados armazenados podemos utilizar o clear().

localStorage.clear();

sessionStorage

O sessionStorage, é bem similar ao localStorage, também servindo para armazenar informações no navegador. A diferença entre eles é que o sessionStorage, possui expiração da sessão. Com isso, enquanto no localStorage mesmo fechando o navegador os dados não são perdidos, no sessionStorage toda vez que o navegador é fechado os dados são apagados.

Algumas das particularidades do sessionStorage:

• Toda vez que uma página é carregada em uma guia específica do navegador, é criada uma sessão exclusiva e ligada a esta guia.
• Uma sessão vive enquanto o navegador ou guia estiver aberto, pode ser feito o carregamento e restauração de página.
• Abrir uma página em uma nova janela ou guia gera uma nova sessão. O funcionamento é diferente dos cookies de sessão.
• Abrir várias guias ou janelas com a mesma URL, gera um sessionStorage diferente para cada.
• A ação de duplicar a guia, realiza a cópia dos dados do sessionStorage para a nova guia.
• Fechar a guia ou janela limpa os valores do sessionStorage.

Como utilizar o sessionStorage

A utilização é idêntica a do localStorage que vimos acima. A única diferença é que ao invés de utilizarmos: localStorage vamos  utilizar sessionStorage.

Exemplo geral de utilização:

sessionStorage.setItem('blogTitle', 'Irias Lab'); const blogTitle = sessionStorage.getItem('blogTitle'); sessionStorage.removeItem('blogTitle'); sessionStorage.clear();