Mithilfe von Cookies können Sie Benutzerinformationen auf Webseiten speichern.
Cookies sind Daten, die in kleinen Textdateien auf Ihrem Computer gespeichert werden.
Wenn ein Webserver eine Webseite an einen Browser gesendet hat, wird die Verbindung hergestellt heruntergefahren und der Server vergisst alles über den Benutzer.
Cookies wurden erfunden, um das Problem zu lösen, wie man sich Informationen merken kann der Benutzer":
Wenn ein Benutzer eine Webseite besucht, kann sein Name in einem Cookie gespeichert werden.
Wenn der Benutzer die Seite das nächste Mal besucht, „merkt“ sich das Cookie seinen Namen.
Cookies werden in Name-Wert-Paaren gespeichert wie:
username = John Doe
Wenn ein Browser eine Webseite von einem Server anfordert, werden zu der Seite gehörende Cookies zur Anfrage hinzugefügt. Auf diese Weise der Server erhält die notwendigen Daten, um sich Informationen über Benutzer zu „merken“.
Keines der folgenden Beispiele funktioniert, wenn in Ihrem Browser die Unterstützung lokaler Cookies deaktiviert ist.
JavaScript kann Cookies mit dem document.cookie
erstellen, lesen und löschen Eigentum.
Mit JavaScript kann ein Cookie wie folgt erstellt werden:
document.cookie = "username=John Doe";
Sie können auch ein Ablaufdatum (in UTC-Zeit) hinzufügen. Standardmäßig wird das Cookie beim Schließen des Browsers gelöscht:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Mit einem Pfadparameter können Sie dem Browser mitteilen, zu welchem Pfad das Cookie gehört. Standardmäßig gehört das Cookie zur aktuellen Seite.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Mit JavaScript können Cookies wie folgt gelesen werden:
let x = document.cookie;
document.cookie
gibt alle Cookies in einer Zeichenfolge zurück, ähnlich wie: cookie1=value; cookie2=Wert; cookie3=Wert;
Mit JavaScript können Sie ein Cookie auf die gleiche Weise ändern, wie Sie es erstellen:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Das alte Cookie wird überschrieben.
Das Löschen eines Cookies ist sehr einfach.
Sie müssen keinen Cookie-Wert angeben, wenn Sie ein Cookie löschen.
Setzen Sie einfach den Ablaufparameter auf ein vergangenes Datum:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Sie sollten den Cookie-Pfad definieren, um sicherzustellen, dass Sie das richtige Cookie löschen.
Bei einigen Browsern können Sie ein Cookie nicht löschen, wenn Sie den Pfad nicht angeben.
Die Eigenschaft document.cookie
sieht aus wie eine normale Textzeichenfolge. Aber es ist nicht.
Selbst wenn Sie einen ganzen Cookie-String in document.cookie schreiben, können Sie beim erneuten Auslesen nur den sehen Name-Wert-Paar davon.
Wenn Sie ein neues Cookie setzen, werden ältere Cookies nicht überschrieben. Das neue Cookie wird zu document.cookie hinzugefügt, wenn Sie also document.cookie lesen wieder erhalten Sie so etwas wie:
cookie1=Wert; cookie2=Wert;
Wenn Sie den Wert eines bestimmten Cookies ermitteln möchten, müssen Sie ein JavaScript schreiben Funktion, die nach dem Cookie-Wert in der Cookie-Zeichenfolge sucht.
Im folgenden Beispiel erstellen wir ein Cookie, das den Namen eines Besuchers speichert.
Wenn ein Besucher zum ersten Mal auf die Webseite gelangt, wird er/sie aufgefordert, seinen/ihren Namen einzugeben. Der Name wird dann in einem Cookie gespeichert.
Wenn der Besucher das nächste Mal auf derselben Seite ankommt, erhält er eine Willkommensnachricht.
Für das Beispiel erstellen wir 3 JavaScript-Funktionen:
Eine Funktion zum Festlegen eines Cookie-Werts
Eine Funktion zum Abrufen eines Cookie-Werts
Eine Funktion zum Überprüfen eines Cookie-Werts
Zuerst erstellen wir eine Funktion
, die den Namen des Besuchers in einer Cookie-Variablen speichert:
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Beispiel erklärt:
Die Parameter der obigen Funktion sind der Name des Cookies (cname) und der Wert des Cookies (cvalue) und die Anzahl der Tage, bis das Cookie ablaufen soll (exdays).
Die Funktion setzt ein Cookie, indem sie den Cookienamen und das Cookie addiert Wert und die Ablaufzeichenfolge.
Dann erstellen wir eine Funktion
, die den Wert eines angegebenen Cookies zurückgibt:
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Funktion erklärt:
Übernehmen Sie den Cookienamen als Parameter (cname).
Erstellen Sie eine Variable (Name) mit dem zu suchenden Text (cname + „=").
Dekodieren Sie die Cookie-Zeichenfolge, um Cookies mit Sonderzeichen zu verarbeiten, z. B. '$'
Teilen Sie document.cookie über Semikolons in ein Array namens ca (ca = decodedCookie.split(';')).
Durchlaufen Sie das ca-Array (i=0; i < ca.length; i++) und lesen Sie jeden Wert aus c=ca[i]).
Wenn das Cookie gefunden wird (c.indexOf(name) == 0), wird der Wert des Cookies zurückgegeben (c.substring(name.length, c.length).
Wenn das Cookie nicht gefunden wird, geben Sie „“ zurück.
Zuletzt erstellen wir die Funktion, die prüft, ob ein Cookie gesetzt ist.
Wenn das Cookie gesetzt ist, wird eine Begrüßung angezeigt.
Wenn das Cookie nicht gesetzt ist, wird ein Eingabeaufforderungsfeld angezeigt, in dem Sie nach dem Namen des Benutzers gefragt werden. und speichert das Benutzernamen-Cookie für 365 Tage, indem Sie die Funktion setCookie
aufrufen:
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
Im obigen Beispiel wird die Funktion checkCookie()
ausgeführt, wenn die Seite geladen wird.