useLocalStorage Hook de Local Storage

Última atualização: 2026-11-03

useLocalStorage Hook de Local Storage

useLocalStorage mantém as leituras e escritas de useState em sincronia com localStorage: ele lê o valor armazenado preguiçosamente durante a inicialização e escreve de volta no disco a cada atualização, de modo que o estado sobrevive a um recarregamento da página. É o exemplo de livro didático de um hook personalizado que encapsula uma API nativa do navegador. O setter retornado se comporta exatamente como o de useState, então quem chama nunca precisa aprender uma segunda API só para obter persistência de graça.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key)      // lazy init: read only once
    return saved !== null ? JSON.parse(saved) : initial
  })
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])
  return [value, setValue]
}

⚙️ Parâmetros

Retorna：Retorna uma tupla [value, setValue] que funciona exatamente como useState, exceto que as leituras e escritas são persistidas em localStorage automaticamente.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar no botão aumenta o contador e o escreve em localStorage; após um recarregamento ou reabrir a página a contagem ainda está lá, e "Reset" a traz de volta a zero.

💡 Pontos-chave

🏷️ Mais Padrões de Componentes

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós