JavaScript -Cookies
Mit Cookies können Sie Benutzerinformationen auf Webseiten speichern.
Was sind Cookies?
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 beendet und der Server vergisst alles über den Benutzer.
Cookies wurden erfunden, um das Problem zu lösen, "wie man Informationen über den Benutzer speichert":
- 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 der Anfrage Cookies hinzugefügt, die zu der Seite gehören. Auf diese Weise erhält der Server 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.
Erstellen Sie ein Cookie mit JavaScript
document.cookie
JavaScript kann mit der Eigenschaft Cookies erstellen, lesen und löschen .
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=/";
Lesen Sie ein Cookie mit JavaScript
Mit JavaScript können Cookies wie folgt gelesen werden:
let x = document.cookie;
document.cookiegibt alle Cookies in einer Zeichenfolge zurück, ähnlich wie: cookie1=value; cookie2=wert; cookie3=wert;
Ändern Sie ein Cookie mit JavaScript
Mit JavaScript können Sie ein Cookie genauso ä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.
Löschen Sie ein Cookie mit JavaScript
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 Expires-Parameter 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.
Einige Browser lassen Sie ein Cookie nicht löschen, wenn Sie den Pfad nicht angeben.
Der Cookie-String
Die document.cookieEigenschaft 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 das Name-Wert-Paar davon sehen.
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 erneut lesen, erhalten Sie so etwas wie:
Cookie1 = Wert; Cookie2 = Wert;
Wenn Sie den Wert eines bestimmten Cookies finden möchten, müssen Sie eine JavaScript-Funktion schreiben, die nach dem Cookie-Wert in der Cookie-Zeichenfolge sucht.
JavaScript-Cookie-Beispiel
Im folgenden Beispiel erstellen wir ein Cookie, das den Namen eines Besuchers speichert.
Wenn ein Besucher zum ersten Mal auf die Webseite kommt, 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 Setzen eines Cookie-Wertes
- Eine Funktion, um einen Cookie-Wert zu erhalten
- Eine Funktion zum Überprüfen eines Cookie-Werts
Eine Funktion zum Setzen eines Cookies
Zuerst erstellen wir eine function, die den Namen des Besuchers in einer Cookie-Variablen speichert:
Beispiel
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), 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, den Cookiewert und die Ablaufzeichenfolge addiert.
Eine Funktion zum Abrufen eines Cookies
Dann erstellen wir eine function, die den Wert eines bestimmten Cookies zurückgibt:
Beispiel
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:
Nehmen Sie den Cookienamen als Parameter (cname).
Erstellen Sie eine Variable (Name) mit dem Text, nach dem gesucht werden soll (cname + "=").
Decodieren Sie den Cookie-String, um Cookies mit Sonderzeichen zu behandeln, z. B. '$'
Teilen Sie document.cookie an 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), gib den Wert des Cookies zurück (c.substring(name.length, c.length).
Wenn das Cookie nicht gefunden wird, geben Sie "" zurück.
Eine Funktion zum Überprüfen eines Cookies
Zuletzt erstellen wir die Funktion, die prüft, ob ein Cookie gesetzt ist.
Wenn das Cookie gesetzt ist, zeigt es eine Begrüßung an.
Wenn das Cookie nicht gesetzt ist, wird ein Eingabefeld angezeigt, in dem nach dem Namen des Benutzers gefragt wird, und das Benutzernamen-Cookie für 365 Tage gespeichert, indem die setCookieFunktion aufgerufen wird:
Beispiel
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);
}
}
}
Jetzt alle zusammen
Beispiel
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);
}
}
}
Das obige Beispiel führt die checkCookie()Funktion aus, wenn die Seite geladen wird.