Cookies
Un cookie est un court texte joint par le navigateur aux requêtes du site correspondant. La page écrit theme=dark et affiche theme / dark; ne mettez jamais mot de passe ou jeton dans un cookie lisible par JavaScript.
Pas le stockage web
localStorage gardait saved / lida / tea. Un cookie concerne son site et son chemin, pas tous les sites. document.cookie est une chaîne à points-virgules, non un objet.
Préférence
Path=/ rend theme disponible sur les chemins du site. SameSite=Lax limite les cas intersites; Secure ne part qu’en HTTPS.
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
console.log(document.cookie);
La chaîne peut contenir plusieurs paires visibles: ne la comparez pas entièrement à theme=dark.
Lire un nom
Scindez avec ;, cherchez le nom suivi de =, puis appliquez decodeURIComponent à la valeur.
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"));
On lit dark, puis null: drink n’a jamais été écrit et son absence ne produit pas d’erreur.
Encoder
; et = sont de la syntaxe de cookie. Encodez tea / regular avant l’écriture.
Le résultat redevient tea / regular; un point-virgule brut commencerait une autre partie.
📊 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 |
Choisir
Cookie et localStorage ne protègent pas un secret contre un script déjà présent sur la page.
HttpOnly est illisible et non définissable par JavaScript. Le serveur l’envoie dans 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>
La ligne
La page enregistre dark, lit theme et compose le texte.
La ligne est theme / dark. En HTTP ordinaire, Secure peut être refusé; le site réel utilise HTTPS.
Exercice
Écrivez theme avec Path=/; lisez drink avant écriture; encodez tea / regular; nommez HttpOnly, Secure et SameSite; relisez theme / dark.
Erreurs et résumé
Ne traitez ni la chaîne comme un objet ni le cookie comme un coffre. Pour une session sensible, seul le serveur définit HttpOnly, Secure et SameSite.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut