LocalStorage: guardando informações para sempre (ou até o usuário apagar)

Se os cookies são “bilhetinhos pequenos”, o LocalStorage é como um armário no navegador:
você guarda informações e elas continuam lá mesmo depois de fechar a aba ou reiniciar o navegador.

O que é LocalStorage?

localStorage é uma API do navegador para armazenar dados em formato chave + valor.

• fica salvo no navegador do usuário
• não expira automaticamente
• permanece entre visitas
• só some se o usuário limpar os dados (ou se seu código apagar)

Operações principais

1) Salvar dado (setItem)

localStorage.setItem("tema", "escuro");

2) Ler dado (getItem)

const tema = localStorage.getItem("tema");
console.log(tema); // "escuro"

3) Remover dado específico (removeItem)

localStorage.removeItem("tema");

4) Limpar tudo (clear)

localStorage.clear();

Atenção: tudo é string

No LocalStorage, os valores são salvos como texto.
Se quiser salvar objetos ou arrays, use JSON.stringify e JSON.parse.

Salvando objeto

const usuario = {
  nome: "Ana",
  idade: 28
};

localStorage.setItem("usuario", JSON.stringify(usuario));

Lendo objeto

const usuarioSalvo = localStorage.getItem("usuario");
const usuarioObj = JSON.parse(usuarioSalvo);

console.log(usuarioObj.nome); // Ana

Exemplo prático: lembrar tema da página

<button id="btnTema">Alternar tema</button>

const body = document.body;
const btnTema = document.getElementById("btnTema");

// 1) ao carregar, aplica tema salvo
const temaSalvo = localStorage.getItem("tema");
if (temaSalvo === "escuro") {
  body.classList.add("escuro");
}

// 2) ao clicar, alterna tema e salva
btnTema.addEventListener("click", function () {
  body.classList.toggle("escuro");

  if (body.classList.contains("escuro")) {
    localStorage.setItem("tema", "escuro");
  } else {
    localStorage.setItem("tema", "claro");
  }
});

Quando usar LocalStorage?

Use quando precisar persistir dados simples no navegador, por exemplo:

• tema da interface (claro/escuro)
• idioma preferido
• itens de rascunho
• preferências de visualização

Limites e cuidados

• Capacidade é limitada (varia por navegador, geralmente alguns MB).
• Não é ideal para dados sensíveis.
• Evite guardar token/senha de forma insegura.
• Dados ficam no dispositivo do usuário.

LocalStorage x SessionStorage (visão rápida)

• LocalStorage: persiste entre sessões.
• SessionStorage: dura enquanto a aba estiver aberta.

Resumo da lição

• LocalStorage guarda dados no navegador de forma persistente.
• Métodos principais: setItem, getItem, removeItem, clear.
• Valores são string; use JSON para objetos/arrays.
• É ótimo para preferências do usuário e dados simples que precisam continuar salvos.