Neueste Web-Entwicklung Tutorials
 

JavaScript Cookies


Cookies können Sie Benutzerinformationen in Web - Seiten speichern.


Was sind Cookies ?

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

Wenn ein Webserver eine Webseite an einen Browser gesendet hat, wird die Verbindung abgeschaltet, und der Server vergisst alles über den Benutzer.

Cookies wurden erfunden , um das Problem zu lösen " , wie die Informationen über den Benutzer zu erinnern":

  • Wenn ein Benutzer eine Webseite besucht, kann seinen Namen in einem gespeichert werden cookie .
  • Nächstes Mal , wenn der Benutzer die Seite besucht, das cookie " , erinnert sich " seinen Namen.

Cookies werden in Name-Wert-Paare gespeichert, wie:

username = John Doe

Wenn ein Browser - Anforderung eine Webseite von einem Server, cookies zu der Seite gehört , wird auf die Anforderung hinzugefügt. Auf diese Weise erhält der Server die notwendigen Daten, um Informationen über die Nutzer "erinnern".


Erstellen Sie a Cookie mit JavaScript

JavaScript erstellen, lesen und löschen cookies mit dem document.cookie Eigenschaft.

Mit JavaScript - a cookie kann wie folgt erstellt werden:

document.cookie = "username=John Doe";

Sie können auch ein Ablaufdatum (in UTC-Zeit) hinzuzufügen. In der Standardeinstellung the cookie gelöscht wird, wenn der Browser geschlossen wird:

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

Mit einem Pfad - Parameter können Sie dem Browser mitteilen , welchen Weg the cookie gehört. In der Standardeinstellung the cookie gehört zu der aktuellen Seite.

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

Lesen Sie a Cookie mit JavaScript

Mit JavaScript cookies kann wie folgt gelesen werden:

var x = document.cookie;

document.cookie kehren alle cookies in einer Zeichenfolge viel wie: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;


Ändern Sie a Cookie mit JavaScript

Mit JavaScript können Sie ändern , a cookie auf die gleiche Weise , wie Sie es schaffen:

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

Der alte cookie überschrieben.


Löschen a Cookie mit JavaScript

Das Löschen a cookie ist sehr einfach. Nur der Parameter auf eine bestandene Datum gültig bis:

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

Beachten Sie, dass Sie nicht angeben müssen , um a cookie - Wert beim Löschen a cookie .


Die Cookie - String

Die document.cookie Eigenschaft sieht aus wie ein normaler Textfolge. Aber es ist nicht.

Selbst wenn Sie eine ganze schreiben cookie String document.cookie , wenn Sie es noch einmal lesen, können Sie nur den Namen-Wert - Paar davon zu sehen.

Wenn Sie ein neues Set - cookie , ältere cookies werden nicht überschrieben. Der neue cookie wird hinzugefügt document.cookie , also wenn Sie lesen document.cookie wieder werden Sie so etwas wie zu bekommen:

cookie1 = value; cookie2 = value;

- -

Wenn Sie den Wert eines angegebenen finden wollen cookie , müssen Sie einen JavaScript - Funktion schreiben , die für den sucht cookie - Wert in der cookie - String.


JavaScript Cookie - Beispiel

In dem Beispiel zu folgen, erstellen wir a cookie , das den Namen eines Besuchers speichert.

Das erste Mal, wenn ein Besucher auf der Web-Seite kommt, wird er gebeten, in seinem Namen zu füllen. Der Name wird dann in gespeicherten a cookie .

Das nächste Mal, wenn der Besucher auf der gleichen Seite ankommt, wird er eine Begrüßungsnachricht erhalten.

Für das Beispiel werden wir drei JavaScript-Funktionen zu erstellen:

  1. Eine Funktion , ein zu setzen cookie - Wert
  2. Eine Funktion , eine zu bekommen cookie - Wert
  3. Eine Funktion , um eine zu überprüfen cookie - Wert

Eine Funktion zum Setzen a Cookie

Zuerst erstellen wir eine Funktion, die den Namen des Besuchers in speichert a cookie Variable:

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;
}

Erklärt Beispiel:

Die Parameter der Funktion oben sind der Name des cookie (cname) , dem Wert des the cookie (cvalue) , und die Anzahl der Tage , bis die Plätzchen (exdays) ablaufen soll.

Die Funktion setzt a cookie durch Addition der cookiename , the cookie - Wert und der Ablauf Zeichenfolge.


Eine Funktion zum Erhalten a Cookie

Dann erstellen wir eine Funktion, die den Wert eines bestimmten kehrt cookie :

Beispiel

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 "";
}

Funktion erklärt:

Nehmen Sie the cookiename als Parameter (CNAME).

Erstellen Sie eine Variable (Name) mit dem Text für (cname + "=") zu suchen.

Split document.cookie auf Semikolons in ein Array namens ca (ca = document.cookie.split(';')) .

Schleife durch die ca array (i=0;i<ca.length;i++) und ausgelesen jeden Wert c=ca[i]) .

Wenn the cookie gefunden wird (c.indexOf(name) == 0) , geben den Wert des the cookie (c.substring(name.length,c.length) .

Wenn the cookie nicht gefunden wird, zurückkehren "".


Eine Funktion zum Überprüfen a Cookie

Schließlich schaffen wir die Funktion , die checks , ob a cookie gesetzt wird.

Wenn the cookie gesetzt ist , wird es einen Gruß an.

Wenn the cookie nicht gesetzt ist, wird es eine schnelle Feld anzuzeigen, für den Namen des Benutzers zu fragen, und speichert den Benutzernamen cookie für 365 Tage, durch die anruf setCookie Funktion:

Beispiel

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);
        }
    }
}

Jetzt alle zusammen

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;
}

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("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}
Versuch es selber "

Das obige Beispiel führt die checkCookie() Funktion , wenn die Seite geladen wird .