JavaScript Cookies
- Vorherige Seite JS Timing
- Nächste Seite Einführung in die Web-API
Cookies ermöglichen es Ihnen, Benutzerinformationen auf Webseiten zu speichern.
Was ist ein Cookie?
Cookies sind Daten, die in kleinen Textdateien auf Ihrem Computer gespeichert werden.
Nachdem der Webserver eine Webseite an den Browser gesendet hat, wird die Verbindung geschlossen und der Server vergisst alles über den Benutzer.
Cookies wurden erfunden, um die Frage zu beantworten: "Wie kann man Benutzerinformationen merken?"
- Wenn ein Benutzer eine Webseite besucht, kann sein Name in einem Cookie gespeichert werden.
- Wenn der Benutzer die Seite das nächste Mal besucht, wird der Cookie seinen Namen "merken".
Cookies werden in Namen-Wert-Paaren gespeichert, z.B.:
username = Bill Gates
Wenn der Browser eine Webseite von einem Server anfordert, werden die Cookies der Seite zu dieser Anfrage hinzugefügt. Auf diese Weise erhält der Server die notwendigen Daten, um Informationen des Benutzers "zu erinnern".
Funktionieren die folgenden Beispiele nicht, wenn der Browser keine lokale Cookie-Unterstützung hat:
Mit JavaScript können Sie Cookies erstellen
JavaScript kann document.cookie Eigenschaften zum Erstellen, Lesen und Löschen von Cookies.
Mit JavaScript können Sie so Cookies erstellen:
document.cookie = "username=Bill Gates";
Sie können auch eine Gültigkeitsdauer (UTC-Zeit) hinzufügen. Standardmäßig werden Cookies, wenn der Browser geschlossen wird, gelöscht:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Durch path Parameter, mit denen Sie dem Browser mitteilen können, welchen Pfad der Cookie gehört. Standardmäßig gehört der Cookie zur aktuellen Seite.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Cookie durch JavaScript lesen
Durch JavaScript können Sie Cookies so lesen:
var x = document.cookie;
document.cookie Gibt alle Cookies in einer Zeichenkette zurück, zum Beispiel: cookie1=value; cookie2=value; cookie3=value;
Cookie durch JavaScript ändern
Durch die Verwendung von JavaScript können Sie es so ändern, wie Sie es erstellt haben:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Der alte Cookie wird überschrieben.
Cookie durch JavaScript löschen
Die Löschung eines Cookies ist sehr einfach.
Bei der Löschung eines Cookies müssen Sie den Cookie-Wert nicht angeben:
Direkt expires Setzen Sie den 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 der richtige Cookie gelöscht wird.
Einige Browser lassen Sie nicht, Cookies zu löschen, wenn Sie den Pfad nicht angeben.
Cookie-String
document.cookie Das Attribut scheint wie ein normaler Textstring zu sein. Aber das ist nicht der Fall.
Selbst wenn Sie document.cookie Schreiben Sie einen vollständigen Cookie-String, wenn Sie ihn erneut lesen, sehen Sie nur seinen Namen-Wert-Paaren.
Wenn ein neuer Cookie gesetzt wird, wird der alte Cookie nicht überschrieben. Der neue Cookie wird zu document.cookie hinzugefügt, daher wenn Sie document.cookie lesen, erhalten Sie etwas wie dieses:
cookie1 = value; cookie2 = value;
Wenn Sie den Wert eines bestimmten Cookies finden möchten, müssen Sie eine JavaScript-Funktion schreiben, um den Cookie-Wert in der Cookie-Zeichenfolge zu suchen.
JavaScript Cookie Beispiel
Im folgenden Beispiel erstellen wir ein Cookie, um den Namen des Besuchers zu speichern.
Wenn ein Besucher zum ersten Mal die Webseite besucht, wird er aufgefordert, seinen Namen einzugeben. Dieser Name wird dann im Cookie gespeichert.
Wenn ein Besucher zum ersten Mal die gleiche Seite besucht, erhält er eine Begrüßungsnachricht.
Zum Beispiel erstellen wir 3 JavaScript-Funktionen:
- Funktion zum Setzen des Cookie-Werts
- Funktion zum Abrufen des Cookie-Werts
- Funktion zum Überprüfen des Cookie-Werts
Funktion zum Setzen eines Cookies
Zunächst erstellen wir eine Funktion, um den Namen des Besuchers in der Cookie-Variable zu speichern:
Beispiel
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Beispielexplanation:
Die Parameter dieser Funktion sind: der Name des Cookies (cname), der Wert des Cookies (cvalue) und die Anzahl der Tage, bis das Cookie abläuft (exdays).
Durch Hinzufügen des Cookie-Namens, des Cookie-Werts und des Ablaufdatums wird die Funktion das Cookie gesetzt.
Funktion zum Abrufen eines Cookies
Dann erstellen wir eine Funktion, die den Wert eines bestimmten Cookies zurückgibt:
Beispiel
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Funktionserklärung:
Geben Sie den Cookie als Parameter (cname) weiter.
Erstellen Sie eine Variable (name) und den zu suchenden Text (CNAME"=").
Decodieren Sie den Cookie-Zeichenfolge, verarbeiten Sie Cookies mit speziellen Zeichen, wie z.B. "$".
Teile document.cookie durch Semikolons in das Array ca (decodedCookie.split(';')) auf.
Durchlaufe das Array ca (i = 0; i < ca.length; i++) und lies jeden Wert c = ca[i] aus.
Falls ein Cookie gefunden wird (c.indexOf(name) == 0), wird der Wert des Cookies zurückgegeben (c.substring(name.length, c.length)).
Falls kein Cookie gefunden wird, wird "" zurückgegeben.
Funktion zur Überprüfung von Cookies
Schließlich erstellen wir eine Funktion, um zu überprüfen, ob ein Cookie gesetzt ist.
Falls ein Cookie bereits gesetzt ist, wird eine Begrüßung angezeigt.
Falls kein Cookie gesetzt ist, wird ein Hinweis angezeigt, in dem der Benutzer nach seinem Namen gefragt wird, und der Benutzername wird als Cookie für 365 Tage gespeichert, indem setCookie Funktion:
Beispiel
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Willkommen zurück " + username);
}
username = prompt("Bitte geben Sie Ihren Namen ein:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
Zusammengefasst
Beispiel
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var 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() {
var user = getCookie("username");
if (user != "") {
alert("Willkommen wieder " + user);
}
user = prompt("Bitte geben Sie Ihren Namen ein:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
Der obige Beispiel wird nach dem Laden der Seite die Funktion checkCookie() ausführen.
- Vorherige Seite JS Timing
- Nächste Seite Einführung in die Web-API
