Der Umgang mit Cookies in JavaScript ist aufgrund der bekanntermaßen beschissenen Schnittstelle, nämlich der document.cookie-Eigenschaft des BOM, etwas kompliziert. Das Besondere an dieser Eigenschaft ist, dass sie sich je nach Verwendung unterschiedlich verhält. Wenn document.cookie zum Abrufen von Attributwerten verwendet wird, gibt es die Zeichenfolge aller auf der aktuellen Seite verfügbaren Cookies (basierend auf der Domäne, dem Pfad, der Ablaufzeit und den Sicherheitseinstellungen des Cookies) als eine Reihe von durch Semikolons getrennten Name-Wert-Paaren zurück. wie im folgenden Beispiel gezeigt:
name1=value1;name2=value2;name3=value3;
1 Alle Namen und Werte werden URL-codiert übergeben, daher muss decodeURIComponent() zum Dekodieren verwendet werden.
Bei Verwendung für Einstellungen kann das document.cookie-Attribut auf eine neue Cookie-Zeichenfolge gesetzt werden. Dieser Cookie-String wird interpretiert und der vorhandenen Cookie-Sammlung hinzugefügt. Durch das Setzen von document.cookie wird das Cookie nicht überschrieben, es sei denn, das genannte Cookie ist bereits vorhanden. Das Format zum Setzen von Cookies ist wie folgt, das gleiche Format, das im Set-Cookie-Header verwendet wird:
name=value; läuft=domian_path
Von diesen Parametern sind nur der Name und der Wert des Cookies erforderlich. Hier ist ein einfaches Beispiel:
document.cookie = "name=Nicholas";
Dieser Code erstellt ein Cookie namens name mit dem Wert Nicholas. Dieses Cookie wird jedes Mal gesendet, wenn der Client eine Anfrage an den Server sendet; es wird gelöscht, wenn der Browser geschlossen wird. Obwohl dieser Code in Ordnung ist, da weder der Name noch der Wert codiert werden müssen, ist es am besten, jedes Mal
wie im Beispiel unten zu verwenden, wenn Sie das Cookie
encodeURIComponent() setzen. ;
document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");
Um zusätzliche Informationen für das erstellte Cookie anzugeben, hängen Sie einfach die Parameter an das an Zeichenfolge, die mit dem Format im Set-Cookie-Header wie folgt übereinstimmt:
document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas ") + "; domain=.wrox.com; path=/";
Da das Lesen und Schreiben von Cookies in JavaScript nicht sehr intuitiv ist, schreiben wir oft Einige Funktionen vereinfachen die Funktionen von Cookies. Es gibt drei grundlegende Cookie-Vorgänge: Lesen, Schreiben und Löschen. Sie werden im CookieUtil-Objekt wie folgt dargestellt:
var CookieUtil = {
get: function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(";", cookieStart)
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure) {
this.set(name, "", new Date(0), path, domain, secure);
}
};Die Methode CookieUtil.get() erhält den entsprechenden Wert basierend auf dem Namen des Cookies. Dazu sucht er nach dem Cookie-Namen und dem Gleichheitszeichen in der Zeichenfolge document.cookie. Wenn es gefunden wird, verwenden Sie indexOf(), um das erste Semikolon nach der Position zu finden (das die Endposition des Cookies angibt). Wenn kein Semikolon gefunden wird, bedeutet dies, dass das Cookie das letzte in der Zeichenfolge ist und die Zeichenfolgen unter der Domäne alle Cookie-Werte sind. Der Wert wird mit decodeURIComponent() dekodiert und schließlich zurückgegeben. Wenn kein Cookie gefunden wird, wird null zurückgegeben.
Die CookieUtil.set()-Methode setzt ein Cookie auf der Seite und akzeptiert mehrere Parameter: Cookie-Name, Cookie-Wert, optionales Datumsobjekt, mit dem angegeben wird, wann das Cookie gelöscht werden soll, optionaler Cookie-URL-Pfad, optionale Domäne und optional Boolescher Wert, der angibt, ob das Sicherheitsflag hinzugefügt werden soll. Die Parameter sind nach der Häufigkeit ihrer Verwendung geordnet, nur die ersten beiden sind erforderlich. Bei dieser Methode werden sowohl der Name als auch der Wert mit encodeURIComponent() URL-codiert und andere Optionen überprüft. Wenn der Ablaufparameter ein Datumsobjekt ist, wird die toGMTString()-Methode des Datumsobjekts verwendet, um das Datumsobjekt korrekt zu formatieren, und zur Ablaufoption hinzugefügt. Der andere Teil der Methode besteht darin, die Cookie-Zeichenfolge zu erstellen und in document.cookie festzulegen.
Es gibt keine direkte Möglichkeit, vorhandene Cookies zu löschen. Setzen Sie das Cookie also erneut mit demselben Pfad, derselben Domäne und denselben Sicherheitsoptionen und legen Sie die Ablaufzeit auf die Vergangenheit fest. Die CookieUtil.unset()-Methode kann mit solchen Dingen umgehen. Es akzeptiert 4 Parameter: den Namen des zu löschenden Cookies, einen optionalen Pfadparameter, einen optionalen Domänenparameter und einen optionalen Sicherheitsparameter. Diese Parameter werden zusammen mit einer leeren Zeichenfolge und der Festlegung der Ablaufzeit auf den 1. Januar 1970 (der Wert des auf 0 ms initialisierten Date-Objekts) an CookieUtil.set() übergeben. Dadurch wird sichergestellt, dass das Cookie gelöscht wird.
Diese Methoden können wie folgt verwendet werden:
//设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional <a href="http://www.php1.cn/">JavaScript</a>");
//读值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book")
//设置1个cookie，包括它的路径、域、截止日期
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", new Date("January 1, 2010"));
//删除同一cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
//设置1个<a href="http://www.php1.cn/category/23.html">安全</a>cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);Diese Methoden erleichtern die Verwendung von Cookies zum Speichern von Daten auf der Clientseite, indem sie die Aufgabe des Parsens und Erstellens von Cookie-Strings übernehmen
