Voltar para o Blog Iniciante • 5 min

Guia Rápido: Como Usar o localStorage no JavaScript

Aprenda a utilizar o localStorage para armazenar dados no navegador e torná-los persistentes entre sessões.

O que é o localStorage?

O localStorage é um recurso do JavaScript que permite armazenar dados no navegador de forma persistente. Ele é útil para salvar preferências do usuário, temas e pequenos bancos de dados locais.

Salvando dados

Podemos armazenar informações no localStorage com a função setItem:

localStorage.setItem('nome', 'João');

Recuperando dados

Para obter um valor salvo, usamos getItem:

const nome = localStorage.getItem('nome');
console.log(nome); // João

Removendo dados

Podemos excluir um item específico ou limpar todo o armazenamento:

localStorage.removeItem('nome');
localStorage.clear();

Exemplo prático

Copie este código e teste no navegador:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo localStorage</title>
</head>
<body>
  <input type="text" id="inputNome" placeholder="Digite seu nome">
  <button onclick="salvarNome()">Salvar</button>
  <button onclick="mostrarNome()">Mostrar</button>
  <p id="mensagem"></p>
  <script>
    function salvarNome() {
      const nome = document.getElementById('inputNome').value;
      localStorage.setItem('nomeUsuario', nome);
    }
    function mostrarNome() {
      const nome = localStorage.getItem('nomeUsuario');
      document.getElementById('mensagem').textContent = nome ? `Nome salvo: ${nome}` : 'Nenhum nome encontrado';
    }
  </script>
</body>
</html>

Próximos passos

Experimente combinar localStorage com eventos para salvar preferências do usuário em sua aplicação.