JavaScript-Cookies verstehen und verwenden

JavaScript-Cookie spielt eine wichtige Rolle beim Caching. Dieser Artikel gibt eine Einführung dazu.

Cookies sind Daten, die in Textdateien auf Ihrem Computer gespeichert werden.

Wenn der Webserver eine Webseite an den Browser sendet, zeichnet der Server die Benutzerinformationen nicht auf, nachdem die Verbindung geschlossen wurde.

Die Rolle von Cookies besteht darin, zu lösen, „wie Benutzerinformationen auf der Clientseite aufgezeichnet werden“:

Wenn ein Benutzer eine Webseite besucht, kann sein Name im Cookie aufgezeichnet werden.

Wenn der Benutzer das nächste Mal diese Seite besucht, kann der Benutzerzugriffsdatensatz im Cookie gelesen werden.

Cookies werden als Name/Wert-Paare gespeichert, wie unten gezeigt:

username=John Doe

Wenn der Browser eine Webseite vom Server anfordert, wird das zu dieser Seite gehörende Cookie der Anfrage hinzugefügt. Auf diese Weise erhält der Server Benutzerinformationen.

Verwenden Sie JavaScript, um Cookies zu erstellen

JavaScript kann das document.cookie-Attribut verwenden, um Cookies zu erstellen, zu lesen und zu löschen.

In JavaScript sieht das Erstellen eines Cookies so aus:

document.cookie="username=John Doe";

Sie können dem Cookie auch eine Ablaufzeit (in UTC- oder GMT-Zeit) hinzufügen. Standardmäßig werden Cookies gelöscht, wenn der Browser geschlossen wird:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

Mithilfe des Pfadparameters können Sie dem Browser den Pfad zum Cookie mitteilen. Standardmäßig gehört das Cookie zur aktuellen Seite.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Cookies mit JavaScript lesen

In JavaScript können Sie den folgenden Code zum Lesen von Cookies verwenden:

var x = document.cookie;

Dokument .cookie gibt alle Cookies in Form von Zeichenfolgen zurück, Typformat: cookie1=value; cookie3=value;

Verwenden Sie JavaScript, um Cookies zu ändern

In JavaScript werden Cookies geändert Ähnlich wie beim Erstellen von Cookies wie folgt:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Alte Cookies werden überschrieben.

Cookies mit JavaScript löschen

Cookies löschen ist einfach. Sie müssen nur den Ablaufparameter auf die vorherige Zeit setzen, wie unten gezeigt, auf Do, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Beachten Sie, dass Sie den Wert von nicht angeben müssen Cookie, wenn Sie es löschen.

Cookie-String

Die Eigenschaft document.cookie sieht aus wie eine normale Textzeichenfolge, ist es aber nicht.

Auch wenn Sie eine vollständige Cookie-Zeichenfolge in document.cookie schreiben, werden die Cookie-Informationen beim erneuten Lesen der Cookie-Informationen in Form von Name/Wert-Paaren angezeigt.

Wenn Sie ein neues Cookie setzen, wird das alte Cookie nicht überschrieben. Das neue Cookie wird zu document.cookie hinzugefügt. Wenn Sie also document.cookie erneut lesen, erhalten Sie Daten wie diese:

cookie1=value; cookie2=value;

show All Cookies Cookie 1 erstellen Cookie 2 erstellen Cookie 1 löschen Cookie 2 löschen

Wenn Sie einen bestimmten Cookie-Wert finden müssen, müssen Sie eine JavaScript-Funktion erstellen, um den Cookie-Wert in der Cookie-Zeichenfolge zu finden.

Beispiel für ein JavaScript-Cookie

Im folgenden Beispiel erstellen wir ein Cookie, um den Besuchernamen zu speichern.

Zuerst besucht der Besucher die Webseite und wird aufgefordert, seinen Namen einzugeben. Dieser Name wird im Cookie gespeichert.

Wenn der Besucher das nächste Mal die Seite besucht, wird ihm eine Willkommensnachricht angezeigt.

In diesem Beispiel erstellen wir 3 JavaScript-Funktionen:

Funktion zum Festlegen des Cookie-Werts

Funktion zum Abrufen des Cookie-Werts

Funktion zum Erkennen des Cookie-Werts

Funktion zum Festlegen des Cookie-Werts

Zuerst erstellen wir eine Funktion zum Speichern des Namens des Besuchers:

function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;}

Funktionsanalyse:

Das Obige In den Funktionsparametern Der Name des Cookies ist cname, der Wert des Cookies ist cvalue und die Ablaufzeit des Cookies ist festgelegt.

Diese Funktion legt den Cookie-Namen, den Cookie-Wert und die Cookie-Ablaufzeit fest.

Funktion zum Abrufen des Cookie-Werts

Dann erstellen wir einen Funktionsbenutzer, um den Wert des angegebenen Cookies zurückzugeben:

function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";}

Funktionsanalyse:

Parameter des Cookie-Namens für cname.

Erstellen Sie eine Textvariable zum Abrufen des angegebenen Cookies: cname + „=".

Verwenden Sie Semikolons, um die Zeichenfolge document.cookie zu teilen, und weisen Sie das Array der geteilten Zeichenfolge ca zu (ca = document.cookie.split(';')).

Durchlaufen Sie das ca-Array (i=0;i

Wenn das Cookie gefunden wird (c.indexOf(name) == 0), geben Sie den Cookie-Wert zurück (c.substring(name.length,c.length).

Wenn das Cookie wird nicht gefunden, gibt „“ zurück.

Funktion zum Erkennen des Cookie-Werts

Schließlich können wir eine Funktion erstellen, die erkennt, ob das Cookie erstellt wurde gesetzt ist, wird eine Begrüßungsnachricht angezeigt. Wenn das Cookie nicht gesetzt ist, wird ein Popup-Fenster angezeigt, in dem Sie nach dem Namen des Besuchers gefragt werden, und die Funktion setCookie wird aufgerufen, um den Namen des Besuchers zu speichern für 365 Tage:

function checkCookie(){
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }}

Vollständiges Beispiel

Beispiel

function setCookie(cname,cvalue,exdays){
    var d = new Date();    d.setTime(d.getTime()+(exdays*24*60*60*1000));    var expires = "expires="+d.toGMTString();    document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){
    var name = cname + "=";    var ca = document.cookie.split(&#39;;&#39;);    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";}function checkCookie(){
    var user=getCookie("username");    if (user!=""){
        alert("欢迎 " + user + " 再次访问");    }
    else {
        user = prompt("请输入你的名字:","");          if (user!="" && user!=null){
            setCookie("username",user,30);        }
    }}

本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。

相关推荐：

JavaScript 弹窗事件的相关知识

JavaScript typeof, null, 和 undefined的相关知识

JavaScript RegExp 对象的使用介绍

Das obige ist der detaillierte Inhalt vonJavaScript-Cookies verstehen und verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!