JavaScript-Operations-Cookie-Methode

Was sind Cookies?

„Ein Cookie ist eine Variable, die auf dem Computer eines Besuchers gespeichert wird. Dieses Cookie wird jedes Mal gesendet, wenn derselbe Computer eine Seite über einen Browser anfordert.“ Cookie-Werte. ” – w3school

Ein Cookie ist eine Datei, die von einer besuchten Website erstellt wird, um Browserinformationen, 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 Computer des Clients 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.

Grundkenntnisse über Cookies

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: d62b085495bd5bd7a104a91f414ddaae=3ef37b6ec18b07703dc6d5f20c4771e7; Name und Wert müssen zulässige 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 ich habe sogar einen Witz gemacht...囧

Cookie hat das Konzept von Domäne und Pfad. Domäne ist das Konzept der Domäne. Da es sich bei dem Browser um eine Sicherheitsumgebung handelt, 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 Art und Weise, Cookies zu erstellen, der Art und Weise, Variablen zu definieren. 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

Von eingebetteten Anzeigen oder Bildern auf Webseiten und andere Drittanbieter-Cookies von anderen Domänen (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 einige Ihrer persönlichen Daten während der aktuellen Nutzung und diese Informationen werden auch vom Computer gelöscht, wenn der Browser geschlossen wird.

Cookies mit festgelegter 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. Diese Art von Cookies 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, durchsuchen Auch der Browser selbst verfügt über diese Funktion)

Löschen Sie Cookies, indem Sie die Gültigkeitsdauer von Cookies festlegen

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

Die Der Browser kann Einstellungen vornehmen, um den Zugriff auf Cookies zu akzeptieren oder zu 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 Zugriffsoperation

Wenn Sie JavaScript verwenden, um auf Cookies zuzugreifen, müssen Sie das Cookie-Attribut des Document-Objekts verwenden So erstellen und ändern Sie ein Cookie:

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 Zeichenfolgen arbeitet. Kopieren Sie diesen Code von w3school zur Analyse:

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){
　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　
　　　　　　　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。
　　　　　　　　//因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　
　　　　　　　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　}
　　　　}
　　　　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. Legen Sie die Gültigkeitsdauer des Cookies fest

Der Lebenszyklus von Cookies, der häufig in Artikeln erscheint, ist die Gültigkeitsdauer und die Ablaufzeit, 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:

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

Der Datumswert im obigen Code ist GMT (Greenwich-Zeit)-Format, die Generierungsmethode 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 durch new Eine Instanz von Date, 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 eine Zeichenfolge umzuwandeln und das Ergebnis zurückzugeben.

Verwenden Sie Die folgende vollständige Funktion zur Veranschaulichung des Erstellungsprozesses. Worauf wir während des Cookie-Prozesses achten müssen – kopiert von w3school. Erstellen Sie eine Funktion, die Informationen in Cookies speichert:

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30)

Jetzt besteht unsere Funktion darin, die Gültigkeitsdauer des Cookies entsprechend der Anzahl der Tage festzulegen. Wenn Sie es in anderen Einheiten festlegen möchten ( B. Stunden), dann ändern Sie einfach die dritte Codezeile:

exdate.setHours(exdate.getHours() + Expiredays);

Setzen Sie zukünftige Cookies so ein. Die Gültigkeitsdauer basiert auf Stunden.

Es gibt zwei in den FAQ erwähnte Methoden zum Löschen von Cookies. Worüber wir jetzt sprechen werden, ist das Ungültigmachen von Cookies, 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 ausführlicheren Cookie-Thema fort.

Cookie-Erweitertes Kapitel

1. Cookie-Pfadkonzept

Im Grundwissen wird erwähnt, dass Cookies das Konzept von Domäne und Pfad haben Pfad in Cookies.

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 kann daher nicht auf alle von anderen Seiten erstellten Seiten zugegriffen werden. Kekse. 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 kann „http://www.jb51.net“ oder „http://www.jb51.net/xxxx/“ nicht auf dieses Cookie zugreifen (ein bloßer Blick darauf ist nutzlos, übe die Wahrheit ^_^).

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:

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 folgenden Verzeichnis abzulegen, also egal welches Unterseite erstellt das Cookie, alle Alle Seiten können aufgerufen werden:

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

2. Cookie-Domänenkonzept

Der 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:

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

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

例如 ”www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，我们如果想让 “sports.qq.com” 下的cookie被 ”www.qq.com” 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 “/”。例：

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

   

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

    把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，囧…

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

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

    再看看基础用法时提到过的getCookie()内的一句：

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

    这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

个人代码

/*设置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) {　
 var exdate = new Date(); //获取当前时间　
 exdate.setDate(exdate.getDate() + expiredays);　 //过期时间　　
 document.cookie = c_name + "=" + //cookie名称
 escape(value) + //将cookie值进行编码
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //设置过期时间
 ((path == null) ? '/' : ';path=' + path) + //设置访问路径
 ((domain == null) ? '' : ';domain=' + domain) + //设置访问域
 ((secure == null) ? '' : ';secure=' + secure);　 //设置是否加密
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);
/*获取Cookie*/
function getCookie(c_name, index) {
 var cookies = document.cookie; //获取cookie值
 var cookieLen = cookies.length; //获取cookie长度
 if (cookieLen > 0) { //cookie不为空时
  var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序号
  if (c_start > -1) { //cookie值存在时
   c_start += c_name.length + 1; //获取cookie值开始序列号
   var c_end = cookies.indexOf(';', c_start); //获取cookie值结束序列号
   if (c_end == -1) { //当cookie是最后一个时
    c_end = cookieLen; //设置cookie值结束序列号为cookie长度
   };
   var cookieStr = unescape(cookies.substring(c_start, c_end)); //获取解码cookie值
   var cookieObj = cookieStr.split(';'); //分割cookie值
   index = ((index == null) ? 0 : index); //判断index是否传值
   var goalObj = cookieObj[index]; //索引数组
   var goalStr = goalObj.split('=');
   var getcook = goalStr[1]; //获取需要取的cookie值
   return getcook;
  };
 } else {
  console.log('页面没有cookie');
 }
};
alert(getCookie('test', 0)); //打印查询cookie值