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();