Quando você visita um site, ele pode guardar pequenas informações no seu navegador. Isso serve para lembrar preferências, dados de formulários ou até o estado de uma página. No JavaScript, existem duas formas simples de fazer isso: LocalStorage e SessionStorage.
Neste artigo, você vai aprender o que são, como funcionam e como usar cada um na prática.
O que é o LocalStorage?
O LocalStorage é um tipo de armazenamento interno do navegador. Ele permite guardar dados de forma permanente, mesmo depois que o usuário fecha o navegador ou o computador.
Por exemplo, se você salva o nome de um usuário com LocalStorage, ele ainda estará lá quando a pessoa abrir o site novamente no dia seguinte.
O LocalStorage faz parte da API Web Storage, uma ferramenta do JavaScript para armazenar informações diretamente no navegador, sem precisar de banco de dados.
O que é o SessionStorage?
O SessionStorage funciona de forma parecida com o LocalStorage, mas tem uma grande diferença: ele guarda os dados apenas enquanto a aba ou janela do navegador estiver aberta.
Assim que o usuário fecha a aba, os dados são apagados automaticamente.
Isso é útil para informações temporárias, como resultados de busca, formulários em preenchimento ou configurações que só valem para aquela sessão.
Diferença entre LocalStorage e SessionStorage
| Característica | LocalStorage | SessionStorage |
|---|---|---|
| Duração dos dados | Permanente (até serem apagados) | Somente durante a sessão |
| Compartilhamento | Entre abas e janelas do mesmo site | Restrito à aba atual |
| Capacidade aproximada | 5 MB | 5 MB |
| Uso ideal | Preferências e login | Dados temporários e testes |
Como verificar se o navegador suporta LocalStorage e SessionStorage
Antes de usar essas APIs, é bom verificar se o navegador suporta:
if (typeof(Storage) !== "undefined") {
console.log("Seu navegador suporta Web Storage!");
} else {
console.log("Desculpe, seu navegador não suporta Web Storage.");
}Quase todos os navegadores modernos suportam, mas é uma boa prática fazer essa verificação.
Como usar o LocalStorage
Você pode salvar, ler, atualizar e remover dados com comandos simples.
Aqui está o básico:
1. Salvando dados
localStorage.setItem("nome", "Leandro");2. Lendo dados
let nome = localStorage.getItem("nome");
console.log(nome);3. Removendo um item
localStorage.removeItem("nome");4. Limpando tudo
localStorage.clear();Esses métodos funcionam com pares de chave e valor.
Por exemplo, "nome" é a chave e "Leandro" é o valor.
Como usar o SessionStorage
O SessionStorage funciona da mesma forma, apenas substituindo localStorage por sessionStorage.
1. Salvando dados
sessionStorage.setItem("tema", "escuro");2. Lendo dados
let tema = sessionStorage.getItem("tema");
console.log(tema);3. Apagando um item
sessionStorage.removeItem("tema");4. Limpando tudo
sessionStorage.clear();Armazenando objetos no LocalStorage
Por padrão, o LocalStorage só aceita strings.
Se quiser guardar um objeto, é preciso converter para JSON antes:
const usuario = {
nome: "Ana",
idade: 25
};
// Converter para JSON e salvar
localStorage.setItem("usuario", JSON.stringify(usuario));
// Ler e converter de volta para objeto
const dados = JSON.parse(localStorage.getItem("usuario"));
console.log(dados.nome); // AnaUsar JSON.stringify() e JSON.parse() é essencial para lidar com objetos e listas.
Exemplo prático: modo escuro com LocalStorage
Imagine que seu site tenha um botão para alternar entre modo claro e escuro.
Você quer que o navegador lembre a escolha do usuário.
Com LocalStorage, isso é simples:
const botao = document.getElementById("toggleTema");
const tema = localStorage.getItem("tema");
if (tema === "escuro") {
document.body.classList.add("escuro");
}
botao.addEventListener("click", () => {
document.body.classList.toggle("escuro");
const modoAtual = document.body.classList.contains("escuro") ? "escuro" : "claro";
localStorage.setItem("tema", modoAtual);
});Dessa forma, o tema escolhido continua mesmo depois que o usuário fechar o navegador.
Boas práticas ao usar Web Storage
- Não guarde informações sensíveis como senhas ou dados bancários.
- Evite armazenar grandes volumes de dados.
- Use nomes de chaves claros e padronizados, como
"usuario_nome"ou"tema_site". - Remova dados antigos que não são mais usados.
- Combine LocalStorage e SessionStorage conforme o tipo de dado.
Alternativas ao Web Storage
Além do LocalStorage e SessionStorage, existem outras formas de armazenamento no navegador:
- Cookies: armazenam dados pequenos e podem ser enviados ao servidor.
- IndexedDB: banco de dados mais robusto dentro do navegador.
- Cache API: usada principalmente para aplicativos PWA (Progressive Web Apps).
Para a maioria dos sites simples, o LocalStorage já é suficiente.
Conclusão
O LocalStorage e o SessionStorage são ferramentas poderosas e simples de usar no JavaScript.
Com elas, você pode guardar preferências, estados e configurações de forma rápida e sem servidor.
Use o LocalStorage quando quiser manter os dados entre visitas e o SessionStorage quando precisar apenas de informações temporárias.
Saber usar bem esses recursos melhora a experiência do usuário e torna seu site mais dinâmico e inteligente.
Perguntas Frequentes (FAQ)
1. O que é o LocalStorage?
É um espaço no navegador que guarda dados de forma permanente.
2. O que é o SessionStorage?
Guarda dados temporários que são apagados ao fechar a aba.
3. Qual a diferença entre eles?
O LocalStorage é permanente, o SessionStorage dura só enquanto a aba está aberta.
4. Posso guardar senhas com LocalStorage?
Não. É inseguro armazenar dados sensíveis dessa forma.
5. Qual o limite de armazenamento?
Geralmente cerca de 5 MB por domínio.
6. Posso usar LocalStorage em todos os navegadores?
Sim, quase todos os navegadores modernos suportam.
7. Como salvar objetos no LocalStorage?
Use JSON.stringify() ao salvar e JSON.parse() ao ler.
8. O LocalStorage é compartilhado entre abas?
Sim, abas do mesmo site compartilham o mesmo LocalStorage.
9. O SessionStorage é compartilhado também?
Não, ele é exclusivo de cada aba.
10. O que acontece se eu limpar o cache do navegador?
Os dados do LocalStorage e SessionStorage serão apagados.
11. É preciso conexão com a internet para usar?
Não, funciona localmente no navegador.
12. Como apago todos os dados salvos?
Use localStorage.clear() ou sessionStorage.clear().
