Cookies
Una cookie es ein texto breve, den der navegador bei passenden Anfragen an eine sitio mitschicken kann. Die Seite escribe theme=dark und muestra theme / dark. contraseña oder token de acceso nunca van in ein für JavaScript lesbares Cookie.
No es almacenamiento web
Antes quedó saved / lida / tea in localStorage. Una cookie es distinta: Es puede viajar en solicitudes für seine passende sitio und seinen Pfad gehen, pero no a cualquier sitio. document.cookie ist eine Semikolon-cadena, no un objeto.
Una preferencia pequeña
theme=dark contiene nombre y valor. Mit Path=/ la preferencia funciona auf den Pfaden dieser sitio. SameSite=Lax limita casos comunes entre sitios; Secure solo se envía por HTTPS.
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
console.log(document.cookie);
El registro puede contener varios für diese Seite sichtbare Paare stehen. Por eso no se compara die ganze cadena mit einem einzelnen Paar verglichen.
Leer un nombre
Divide por ; und busca dem Namen plus =. Der navegador baut no un objeto daraus. Hinter dem Gleichheitszeichen wird mit decodeURIComponent se decodifica.
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"));
Las salidas son dark und danach null. drink nunca se escribió; der fehlende Name no produce error. Wie beim früheren Storage-Schlüssel kommt null zurück.
Codificar un valor
; und = son sintaxis de una cookie. Por eso se codifica tea / regular antes de guardar mit encodeURIComponent kodiert und al leer.
El ejemplo devuelve tea / regular. Un punto y coma sin codificar wäre kein normaler Wert mehr, sondern der Beginn eines weiteren Cookie-Teils.
📊 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 |
¿Cookie o localStorage?
Importa, wer den Wert braucht. Ninguno protege un secreto vor JavaScript, das que ya corre en la página.
JavaScript kann HttpOnly ni establecer ni leer. El servidor lo envía con Set-Cookie. Hier geht es nur um eine preferencia visual inocua, no de inicio de sesión.
<!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 línea visible
Die Seite guarda dark, lee solo theme und une den Namen mit dem Ergebnis.
La línea dice theme / dark. Con HTTP normal kann ein navegador das Secure-Cookie rechazar; die echte sitio verwendet HTTPS. saved / lida / tea era de la página de almacenamiento.
Práctica
- theme=dark mit Path=/ guardar y theme lesen.
- drink antes de guardar lesen: null.
- tea / regular codificar y leer sin cambios.
- HttpOnly, Secure und SameSite für eine Sitzung mencionar.
- Leer la línea: theme / dark.
Errores y resumen
document.cookie ist ni objeto ni caja fuerte. No compares todo el texto, Path=/ no olvides und rohe ; oder = no pongas en valores. Para un identificador de sesión sensible, el servidor establece HttpOnly, Secure und SameSite; theme devuelve dark.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior