Ausführliche Erklärung der JavaScript-Betriebscookies_Grundkenntnisse

Was sind Cookies?

„Ein Cookie ist eine Variable, die auf dem Computer des Besuchers gespeichert wird. Dieses Cookie wird jedes Mal gesendet, wenn derselbe Computer eine Seite über einen Browser anfordert. Sie können JavaScript verwenden, um den Wert des Cookies zu erstellen und abzurufen.“ - w3school

Ein Cookie ist eine Datei, die von einer besuchten Website erstellt wird, um Browsing-Informationen, wie z. B. Profilinformationen, zu speichern.

Aus JavaScript-Sicht sind Cookies nur einige String-Informationen. Diese Informationen werden auf dem Computer des Clients gespeichert und zur Übertragung von Informationen zwischen dem Client-Computer und dem Server verwendet.

Diese Informationen können über document.cookie in JavaScript gelesen oder festgelegt werden. Da Cookies hauptsächlich für die Kommunikation zwischen Client und Server verwendet werden, können neben JavaScript auch serverseitige Sprachen (wie PHP) auf Cookies zugreifen.

Cookie-Grundlagen

Für Cookies gilt eine Größenbeschränkung. Die in jedem Cookie gespeicherten Daten dürfen 4 KB nicht überschreiten. Wenn die Länge des Cookie-Strings 4 KB überschreitet, gibt dieses Attribut einen leeren String zurück.

Da Cookies letztendlich in Form von Dateien auf dem Client-Computer gespeichert werden, ist es sehr bequem, Cookies anzuzeigen und zu ändern. Deshalb wird oft gesagt, dass Cookies keine wichtigen Informationen speichern können.

Das Format jedes Cookies ist wie folgt: =; sowohl Name als auch Wert müssen gültige Kennungen sein.

Cookies haben ein Ablaufdatum. Standardmäßig endet der Lebenszyklus eines Cookies mit dem Schließen des Browsers. Wenn Sie möchten, dass das Cookie auch nach dem Schließen des Browsers verwendet werden kann, müssen Sie eine Gültigkeitsdauer für das Cookie festlegen, nämlich das Ablaufdatum des Cookies.

alert(typeof document.cookie) Das Ergebnis ist ein String. Ich dachte einmal, es sei ein Array und habe einen Witz gemacht ... 囧

Cookies haben das Konzept von Domäne und Pfad. Domäne ist das Konzept der Domäne. Da der Browser eine sicherheitsbewusste Umgebung ist, können verschiedene Domänen nicht voneinander auf Cookies zugreifen (natürlich kann ein domänenübergreifender Zugriff auf Cookies durch spezielle Einstellungen erreicht werden). Pfad ist das Konzept des Routings. Auf ein von einer Webseite erstelltes Cookie können nur alle Webseiten im selben Verzeichnis oder Unterverzeichnis wie diese Webseite zugreifen, aber Webseiten in anderen Verzeichnissen können nicht darauf zugreifen (dieser Satz ist etwas verwirrend, ich werde nachsehen). (später darauf zurückkommen) Anhand eines Beispiels ist es einfacher zu verstehen.

Tatsächlich ähnelt die Vorgehensweise beim Erstellen von Cookies der Vorgehensweise beim Definieren von Variablen. Beide erfordern die Verwendung von Cookie-Namen und Cookie-Werten. Dieselbe Website kann mehrere Cookies erstellen und mehrere Cookies können in derselben Cookie-Datei gespeichert werden.

Cookie-FAQ

Es gibt zwei Arten von Cookies:

Cookies, die von der aktuell besuchten Website gesetzt werden

Cookies von Drittanbietern aus anderen Domain-Quellen wie eingebettete Anzeigen oder Bilder auf Webseiten (Websites können Ihre Nutzungsinformationen mithilfe dieser Cookies verfolgen)

Das Grundwissen hat gerade das Problem des Cookie-Lebenszyklus erwähnt. Tatsächlich können Cookies grob in zwei Zustände unterteilt werden:

Temporäre Cookies. Die Website speichert während der aktuellen Nutzung einige Ihrer persönlichen Daten und diese Informationen werden auch von Ihrem Computer gelöscht, wenn der Browser geschlossen wird

Setzen Sie Cookies mit Ablaufzeit. Auch wenn der Browser geschlossen wird, bleiben diese Informationen weiterhin auf dem Computer. Zum Beispiel Anmeldename und Passwort, damit Sie sich nicht jedes Mal anmelden müssen, wenn Sie eine bestimmte Website besuchen. Dieses Cookie kann Tage, Monate oder sogar Jahre auf Ihrem Computer verbleiben

Es gibt zwei Möglichkeiten, Cookies zu löschen:

Löschen Sie Cookies über Browser-Tools (es gibt Tools von Drittanbietern und der Browser selbst verfügt auch über diese Funktion)

Löschen Sie Cookies, indem Sie ihr Ablaufdatum festlegen

Hinweis: Das Löschen von Cookies kann manchmal dazu führen, dass einige Webseiten nicht richtig funktionieren

Browser können so eingestellt werden, dass sie den Zugriff auf Cookies akzeptieren oder verweigern.

Aus Funktions- und Leistungsgründen wird empfohlen, die Anzahl der verwendeten Cookies zu reduzieren und zu versuchen, kleine Cookies zu verwenden.

Die Details der Cookie-Codierung werden separat im erweiterten Cookie-Kapitel vorgestellt.

Wenn es sich um eine Seite auf der lokalen Festplatte handelt, kann die Chrome-Konsole kein JavaScript zum Lesen und Schreiben von Cookies verwenden. Die Lösung ... einen Browser ändern^_^.

Grundlegende Verwendung von Cookies

1. Einfache Zugriffsbedienung

Wenn Sie JavaScript verwenden, um auf Cookies zuzugreifen, müssen Sie das Cookie-Attribut des Document-Objekts verwenden. Eine Codezeile beschreibt, wie ein Cookie erstellt und geändert wird:

Code kopieren Der Code lautet wie folgt:

document.cookie = 'username=Darren';

Im obigen Code stellt „Benutzername“ den Cookie-Namen und „Darren“ den diesem Namen entsprechenden Wert dar. Wenn der Cookie-Name nicht vorhanden ist, wird ein neues Cookie erstellt. Wenn ein Cookie vorhanden ist, wird der dem Cookie-Namen entsprechende Wert geändert. Wenn Sie Cookies mehrmals erstellen möchten, verwenden Sie diese Methode einfach wiederholt.

2. Cookie-Lesevorgang

Es ist eigentlich sehr einfach, Cookies genau zu lesen, indem man einfach mit Strings arbeitet. Kopieren Sie diesen Code von w3school zur Analyse:

Code kopieren Der Code lautet wie folgt:

Funktion getCookie(c_name){
　　if (document.cookie.length>0){ 　　//Überprüfen Sie zunächst, ob das Cookie leer ist. Wenn es leer ist, geben Sie „“
zurück 　　　c_start=document.cookie.indexOf(c_name "=")　//Überprüfen Sie, ob dieses Cookie über indexOf() des String-Objekts existiert. Wenn es nicht existiert, ist es -1　
　　　if (c_start!=-1){
　　　　c_start=c_start c_name.length 1　// Die letzte 1 stellt tatsächlich die Zahl „=“ dar, sodass die Startposition des Cookie-Werts erhalten wird
c_end=document.cookie.indexOf(";",c_start) //Eigentlich war mir ein wenig schwindelig, als ich zum ersten Mal den zweiten Parameter von indexOf() sah. Später fiel mir ein, dass er die angegebene Startindexposition bedeutet ... Das Der Satz dient dazu, die Endposition des Werts abzurufen. Da wir überlegen müssen, ob es sich um das letzte Element handelt, können wir es anhand der Existenz des „;“-Zeichens beurteilen 　　　　if (c_end==-1) c_end=document.cookie.length　
Return unescape(document.cookie.substring(c_start,c_end)) //Der Wert wird durch substring() erhalten. Wenn Sie unescape() verstehen möchten, müssen Sie zunächst wissen, was escape() tut. Dies ist eine sehr wichtige Grundlage. Wenn Sie mehr wissen möchten, können Sie auch die Details der Cookie-Codierung erklären der Artikel
　　　}
　　}
return „“
}　

Natürlich gibt es viele Möglichkeiten, Cookies zu lesen, z. B. Arrays, reguläre Ausdrücke usw., daher werde ich hier nicht auf Details eingehen.

3. Cookie-Gültigkeitsdauer festlegen

Der Lebenszyklus von Cookies, der häufig in Artikeln erscheint, ist die Gültigkeitsdauer und der Ablaufzeitraum, also die Existenzzeit des Cookies. Standardmäßig werden Cookies automatisch gelöscht, wenn der Browser geschlossen wird. Wir können jedoch festlegen, dass die Gültigkeitsdauer des Cookies abläuft. Die Syntax lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

document.cookie = "name=value;expires=date";

Der Datumswert im obigen Code ist eine Datumszeichenfolge im GMT-Format (Greenwich Mean Time) und wird wie folgt generiert:

Code kopieren Der Code lautet wie folgt:

var _date = new Date();
_date.setDate(_date.getDate() 30);
_date.toGMTString();

Die oben genannten drei Codezeilen sind in mehrere Schritte unterteilt:

Generieren Sie eine Datumsinstanz über „Neu“, um die aktuelle Uhrzeit zu erhalten

Die Methode getDate() ruft einen bestimmten Tag im aktuellen lokalen Monat ab und fügt dann 30 hinzu. Ich hoffe, dass dieses Cookie 30 Tage lang lokal gespeichert werden kann

Stellen Sie dann die Zeit über die Methode setDate() ein

Verwenden Sie abschließend die Methode toGMTString(), um das Date-Objekt in einen String zu konvertieren und das Ergebnis zurückzugeben

Verwenden Sie die folgende vollständige Funktion, um zu veranschaulichen, worauf wir beim Erstellen von Cookies achten müssen – kopiert von w3school. Erstellen Sie eine Funktion, die Informationen in einem Cookie speichert:

Code kopieren Der Code lautet wie folgt: Funktion setCookie(c_name, Wert, Ablauftage){

var exdate=new Date();

exdate.setDate(exdate.getDate() expiredays);
Document.cookie=c_name "=" escape(value) ((expiredays==null) ? "" : ";expires=" exdate.toGMTString());
}
//Verwendung: setCookie('username','Darren',30)



Jetzt legt unsere Funktion die Gültigkeitsdauer des Cookies entsprechend der Anzahl der Tage fest (z. B. Stunden), dann ändern Sie die dritte Codezeile:

Code kopieren Der Code lautet wie folgt: exdate.setHours(exdate.getHours() expirdays);

Nachdem Sie diese Einstellung vorgenommen haben, basiert die Gültigkeitsdauer des Cookies auf Stunden.

Es gibt zwei in den FAQ erwähnte Methoden zum Löschen von Cookies. Wir werden jetzt darüber sprechen, Cookies ungültig zu machen, indem die Gültigkeitsdauer auf einen abgelaufenen Zeitraum festgelegt wird. Da es nun eine Möglichkeit gibt, den Gültigkeitszeitraum festzulegen, werden interessierte Freunde gebeten, dies selbst zu tun ^_^. Fahren wir mit dem tiefergehenden Thema Cookies fort.

Cookie-Erweitertes Kapitel

1. Cookie-Pfadkonzept

Im Grundwissen wird erwähnt, dass Cookies die Konzepte Domäne und Pfad haben. Lassen Sie uns nun die Rolle des Pfads in Cookies vorstellen.

Cookies werden im Allgemeinen erstellt, wenn ein Benutzer eine Seite besucht, aber dieses Cookie ist nicht nur auf der Seite zugänglich, auf der es erstellt wurde.

Standardmäßig kann nur auf Webseiten zugegriffen werden, die sich im selben Verzeichnis oder Unterverzeichnis wie die Seite befinden, die das Cookie erstellt hat. Aus Sicherheitsgründen können nicht alle Seiten ungehindert auf von anderen Seiten erstellte Cookies zugreifen. Zum Beispiel:

Erstellen Sie ein Cookie auf der Seite „http://www.jb51.net/Darren_code/“, dann sieht die Seite unter dem Pfad „/Darren_code/“ wie folgt aus: „http://www.jb51.net/ Darren_code /archive/2011/11/07/Cookie.html“ Diese Seite kann standardmäßig Cookie-Informationen abrufen.

Standardmäßig können „http://www.jb51.net“ oder „http://www.jb51.net/xxxx/“ nicht auf dieses Cookie zugreifen (ein bloßer Blick darauf ist nutzlos, Übung wird die Wahrheit zeigen) ^_^).

Wie man dieses Cookie für andere Verzeichnisse oder übergeordnete Verzeichnisse zugänglich macht, kann durch Festlegen des Pfads des Cookies erreicht werden. Beispiele sind wie folgt:

Code kopieren Der Code lautet wie folgt:

document.cookie = "name=value;path=path"
document.cookie = "name=value;expires=date;path=path"

Der Pfad in roter Schrift ist der Pfad des Cookies. Das häufigste Beispiel ist, das Cookie im Verzeichnis abzulegen, sodass alle Seiten darauf zugreifen können, egal welche Unterseite das Cookie erstellt:

Code kopieren Der Code lautet wie folgt:

document.cookie = "name=Darren;path=/";

2. Cookie-Domain-Konzept

Pfad kann das Problem des Zugriffs auf Cookies in derselben Domäne lösen. Lassen Sie uns weiter über das Problem sprechen, dass Cookies den Zugriff zwischen denselben Domänen realisieren. Die Syntax lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

document.cookie = "name=value;path=path;domain=domain";

Die rote Domäne ist der Wert des Cookie-Domänensatzes.

Zum Beispiel haben „www.qq.com“ und „sports.qq.com“ einen gemeinsamen Domainnamen „qq.com“. Wenn wir möchten, dass das Cookie unter „sports.qq.com“ „www. qq.com“ Um darauf zuzugreifen, müssen wir das Domänenattribut des Cookies verwenden und das Pfadattribut auf „/“ setzen. Beispiel:

Code kopieren Der Code lautet wie folgt:

document.cookie = "username=Darren;path=/;domain=qq.com";

Hinweis: Es muss ein Zugriff zwischen derselben Domäne erfolgen. Der Domänenwert kann nicht auf einen anderen Domänennamen als den der primären Domäne festgelegt werden.

3. Cookie-Sicherheit

Normalerweise nutzen Cookie-Informationen HTTP-Verbindungen zur Datenübertragung. Diese Übertragungsmethode ist leicht einzusehen, sodass die in Cookies gespeicherten Informationen leicht zu stehlen sind. Sofern der im Cookie übergebene Inhalt wichtig ist, ist eine verschlüsselte Datenübertragung erforderlich.

Der Name dieses Cookie-Attributs lautet also „sicher“ und der Standardwert ist leer. Wenn das Attribut eines Cookies sicher ist, werden die Daten zwischen ihm und dem Server über HTTPS oder andere sichere Protokolle übertragen. Die Syntax lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

document.cookie = "username=Darren;secure"

Durch die Einstellung des Cookies auf „sicher“ wird lediglich sichergestellt, dass der Datenübertragungsprozess zwischen dem Cookie und dem Server verschlüsselt ist und die lokal gespeicherte Cookie-Datei nicht verschlüsselt wird. Wenn Sie möchten, dass lokale Cookies verschlüsselt werden, müssen Sie die Daten selbst verschlüsseln.

Hinweis: Selbst wenn das Sicherheitsattribut festgelegt ist, bedeutet dies nicht, dass andere die lokal auf Ihrem Computer gespeicherten Cookie-Informationen nicht sehen können. Fügen Sie also letztendlich keine wichtigen Informationen in Cookies ein, oder ...

4. Details zur Cookie-Kodierung

Ursprünglich wollte ich das Wissen über die Cookie-Codierung im FAQ-Bereich vorstellen, denn wenn Sie das nicht verstehen, ist das Codierungsproblem tatsächlich eine Falle, also werde ich es im Detail erklären.

Bei der Eingabe von Cookie-Informationen dürfen keine Sonderzeichen wie Leerzeichen, Semikolons und Kommas eingefügt werden. Im Allgemeinen werden Cookie-Informationen unverschlüsselt gespeichert. Daher müssen Sie vor dem Festlegen der Cookie-Informationen zunächst die Funktion escape () verwenden, um die Informationen zum Cookie-Wert zu codieren, und dann die Funktion unescape () verwenden, um den Wert zurückzukonvertieren, wenn der Cookie-Wert abgerufen wird. Zum Beispiel beim Setzen von Cookies:

Code kopieren Der Code lautet wie folgt:

document.cookie = name "=" escape (value);

Schauen wir uns den Satz in getCookie() an, der in der grundlegenden Verwendung erwähnt wird:

Code kopieren Der Code lautet wie folgt:

return unescape(document.cookie.substring(c_start,c_end));

Auf diese Weise müssen Sie sich keine Sorgen machen, dass die Cookie-Informationen aufgrund spezieller Symbole im Cookie-Wert falsch sind.

Persönlicher Code

Code kopieren Der Code lautet wie folgt:

/*Cookie setzen*/

Funktion setCookie(c_name, Wert, Ablauftage, Pfad, Domäne, sicher) {
var exdate = new Date(); //Erhalte die aktuelle Uhrzeit　
exdate.setDate(exdate.getDate() expirdays); //Ablaufzeit　
document.cookie = c_name "=" //Cookie-Name
escape(value) //Cookie-Wert kodieren
((expiredays == null) ? "" : ";expires=" exdate.toGMTString()) //Ablaufzeit festlegen
((path == null) ? '/' : ';path=' path) //Legen Sie den Zugriffspfad fest
((domain == null) ? '' : ';domain=' domain) //Zugriffsdomäne festlegen
((secure == null) ? '' : ';secure=' secure); //Legen Sie fest, ob
verschlüsselt werden soll };
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);

/*Cookie holen*/

Funktion getCookie(c_name, index) {
varcookies = document.cookie; //Cookie-Wert abrufen
var cookieLen = Cookies.length; //Cookie-Länge abrufen
if (cookieLen > 0) { //Wenn das Cookie nicht leer ist

var c_start = Cookies.indexOf(c_name '='); //Suchen Sie den Cookie-Wert und die Seriennummer im Cookie
if (c_start > -1) { //Wenn ein Cookie-Wert vorhanden ist
c_start = c_name.length 1; //Erhalte die Startsequenznummer des Cookie-Werts

var c_end = Cookies.indexOf(';', c_start); //Cookie-Wert-Endsequenznummer abrufen
If (c_end == -1) { //Wenn das Cookie das letzte ist
c_end = cookieLen; //Setzen Sie die Endsequenznummer des Cookie-Werts auf die Cookie-Länge
};

var cookieStr = unescape(cookies.substring(c_start, c_end)); //Den dekodierten Cookie-Wert abrufen

var cookieObj = cookieStr.split(';'); //Cookie-Wert teilen

index = ((index == null) ? 0 : index); // Bestimmen Sie, ob dem Index ein Wert übergeben wird

var goalObj = cookieObj[index]; //index array
var goalStr = goalObj.split('=');
var getcook = goalStr[1]; //Erforderlichen Cookie-Wert abrufen
Geben Sie getcook;
zurück };
} sonst {
Console.log('Seite hat keine Cookies');
}
};

alert(getCookie('test', 0)); //Abfrage-Cookie-Wert drucken