Cookies
Um cookie é texto curto que o navegador pode anexar a pedidos do site correspondente. A página escreve theme=dark e mostra theme / dark; nunca coloque senha ou token num cookie legível por JavaScript.
Não é web storage
localStorage guardava saved / lida / tea. Cookie acompanha site e caminho compatíveis, não todos os sites. document.cookie é uma string separada por ponto e vírgula, não objeto.
Preferência
Path=/ disponibiliza theme nos caminhos do site. SameSite=Lax limita casos entre sites; Secure só envia por HTTPS.
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
console.log(document.cookie);
A string pode ter vários pares visíveis, portanto não compare todo o texto com theme=dark.
Ler um nome
Divida em ;, localize nome seguido de = e aplique decodeURIComponent ao valor.
function readCookie(name) {
const start = name + "=";
const pair = document.cookie
.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
console.log(readCookie("theme"));
console.log(readCookie("drink"));
Os resultados são dark e null: drink não foi gravado, e nome ausente não causa erro.
Codificar
; e = pertencem à sintaxe do cookie. Codifique tea / regular antes de gravar.
A leitura devolve tea / regular; ponto e vírgula cru iniciaria outra parte.
📊 Cookie and localStorage
| Bedarf | Cookie | localStorage |
|---|---|---|
| Bei passenden Anfragen | oft ja | nein |
| Für Seiten-JavaScript lesbar | außer HttpOnly | ja |
| Kleine Präferenz | möglich | meist einfacher |
| Sensible Sitzungs-ID | Server: HttpOnly + Secure | nicht hier speichern |
Escolha
Cookie e localStorage não protegem segredo contra JavaScript que já executa na página.
HttpOnly não pode ser criado nem lido por JavaScript; o servidor o envia em Set-Cookie.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
function readCookie(name) {
const start = name + "=";
const pair = document.cookie.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
document.querySelector("#line").textContent =
"theme / " + readCookie("theme");
</script>
</body>
</html>
A linha
A página grava dark, lê theme e monta o texto.
A linha é theme / dark. Em HTTP comum Secure pode ser recusado; o site ativo usa HTTPS.
Prática
Grave theme com Path=/, leia drink, codifique tea / regular, cite HttpOnly Secure SameSite e leia a linha.
Erros e resumo
Não trate cookie como objeto ou cofre. Identificador de sessão sensível vem do servidor com HttpOnly, Secure e SameSite.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo