Die Anleitung zu ECMAScript Web Cookie

1- Was ist Web Cookie?

Wie Sie gewusst haben, die Browser  Web und der Server durch das Protokoll  HTTP miteinander kommunizieren. Wenn Sie auf eine  website aus dem Browser zugreifen, wird Ihre Anforderung zum Server geschickt und der Server gibt dem Browser die Inhalt zurück um anzuzeigen.
Cookie ist eine Technik damit eine  website einige Informationen auf Ihrem Computer speichert. Er speichert die Informationen und Spuren,die Sie auf diese  website zugreifen.
Für die Einfachheit sehen Sie eine folgende Situation:
Sie greifen auf eine  website zu, die Sie vorher niemals zugreifen, z.B  foo.com. Angenommen,  website unterstützt 3 SprachenEnglisch, Französisch und Vietnamesisch. Denn Sie niemals vorher auf diese  website zugreifen, wird die Default Englisch Interface angezeigt werden. Sie setzen die andere Sprache zurück, z.B Französisch. Der Server antwortet auf Ihre Anforderung, gleichzeitig schickt er zum Browser eine  Cookie, die Ihre beliebte Sprache enthaltet - die Französisch.
Sie schließen den Computer und besuchen die  website den nächsten Tag. Wenn die Anforderung zum Server geschickt wird, werden die auf Ihrem Computer gespeicherten  Cookie mit der Anforderung geschickt, das dem Server bei der Festlegung Ihrer beliebten Sprache und Rückgabe der Inhalt in dieser Sprache hilft.

Was ist Web Cookie ?

  1. Cookie ist ein kleines Stück der Text, die durch Web Server zu Ihrem Browser geschickt wird. Cookie kann auf die Speicherung oder als die Files auf den Computer des Benutzer speichert werden. Die Cookie kann durch Javascript , das auf Ihrem Browser läuft, auch erstellt werden.
  2. Cookie gespeichert bei der Benutzer-Seite werden mit der Anforderung geschickt jedes Mal wenn der Benutzer  irgendeine Seite von der website besucht.
Die Hauptinformation von  Cookie ist ein Paar  Name/Value (Name/Wert). zum Beispiel:
SessionID = AAA22311
languagePreference = FR
headerColor = BLUE
Die Technik  Cookie wird in die E-commerce  website oft benutzt. Der Benutzer kauft die Waren auf dieser  website . Die Waren, die der Benutzer kaufte, werden in den Einkaufswagen (cart) gelagert.Zum ersten Besuchen wird der Käufer (der Browser) ein einziges  SessionId bekommen (mit den anderen Benutzer nicht zusammentreffend). Jedes  SesionId wird mit einem Einkaufswagen gebindet, der auf Web Server gesteuert wird. Die Nachrichtsstück  SessionId/Value ist eine  Cookie , die auf Ihrem Computer des Benutzer gespeichert wird. Jedes Mal wenn der Benutzer eine neue Anforderung macht, wird  Cookie immer mit der Anforderung eingefügt, damit  Web Server sich den verschiedenen Benutzer unterscheiden kann.

Was schließt eine Cookie ein?

Eine  Cookie ist ein einfacher Datenrekord, der aus dem Browser nach  Web Server übermittelt wird und umgekehrt. Sie hat die Struktur wie folgend:
SSID=Ap4P…GTEq; Domain=foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure;

HSID=AYQEVn…DKrdst; Domain=.foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly

HSID=AYQEVn…DKrdst; Domain=foo.com; Path=/; Max-Age=300; HttpOnly
Attribute Die Bedeutung
Name=Value Der Name von Cookie und deren Wert.
Domain Der Domain Name von website.
Expires Das Datum und die Zeit angeben, wann die Cookie ausläuft (Expiry). Wenn Cookie Expires & Max-Age nicht einstellt, wird sie nach der Austritt des Benutzer sofort auslaufen
Max-Age Die Zeit wird in die Sekunde gerechnet wenn Cookie existieren wird seit sie erstellt wird. Wenn Cookie die beiden Informationen Expires & Max-Age hat, wird Max-Age die Priorität bekommen.
Path Das ist der Pfad zum Verzeichnis oder zur Seite, die diese Cookie einstellt. Sie kann leer werden wenn Sie auf Cookie bei allen Verzeichnis oder Seiten zugreifen möchten.
Secure Wenn attribute vorhanden ist, d.h nur die gesicherten Server (Secure) können auf dieser Cookie zugreifen.
HttpOnly Wenn attribute vorhanden ist, d.h diese Cookie kann nur bei der Seite Server betätigt werden. Aber es ist unmöglich, durch Javascript mit dieser Cookie auf dem Browerzu betätigen
  • Domain=foo.com: Nur der Domäne Name foo.com kann mit dieser Cookie betätigen.
  • Domain=.foo.com: Der Domäne NameTên miền foo.com und alle Sub Domäne Name von ihm  (z.B abc.foo.com) können mit dieser Cookie betätigen.

2- Wo wird Cookie gelagert?

Die  Cookie können auf die Speicherung oder in die Files gespeichert werden. In dieser Part erwähne ich nur die  Cookie , die in die Files in dem Computer des Benutzer gespeichert werden.

IE (Internet Explorer)

In den Browser  IE werden die  Cookie von einer gleichen  website in einer gleichen File gespeichert . Und Sie können sie in das Verzeichnis wie folgend finden:
  • C:\Users\{CurrentUser}\AppData\Roaming\Microsoft\Windows\Cookies
Die Inhalt in dieser File ist ziemlich schwer zu verstehen aber Sie brauchen für sie nicht sorgen

Chrome

Chrome benutzt die Datenbank  SQLite um die Rekorde  Cookie zu speichern, konkret speichert es in die File mit der Name von  Cookies, die Sie in dem Verzeichnis wie folgend sehen können
  • Windows: C:\Users\{CurrentUser}\AppData\Local\Google\Chrome\User Data\Default
  • Mac OS: ~/Library/Application Support/Google/Chrome/Default

3- Cookie auf dem Browser sehen

Es ist sehr einfach,  Cookie auf dem Browser zu sehen. z.B mit dem Browser  Chrome:

4- ECMAScript Cookie

Grundsätzlich gibt es 2 Wegen,damit Sie mit  Cookie arbeiten:
  1. Mit Cookie bei dem Server manipulieren.
  2. Mit Cookie durch auf den Browser des Benutzer laufendes Javascript manipulieren.
SSID=Ap4P…GTEq; Domain=foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; Secure;

HSID=AYQEVn…DKrdst; Domain=.foo.com; Path=/; Expires=Wed, 13 Jan 2021 22:23:01 GMT; HttpOnly

HSID=AYQEVn…DKrdst; Domain=foo.com; Path=/; Max-Age=300; HttpOnly
Bei dem Browser des Benutzer können Sie durch die Verwendung von  Javascript (ECMAScript) mit  Cookie ohne das Attribut  HttpOnly nur manipulieren.
Unter ist das das Beispiel für die Behandlung von  Cookie durch die Verwendung von  Javascript.
cookie-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Cookie example</title>
      <script type="text/javascript" src="cookie-example.js"></script>
   </head>
   <body onload="readCookie()">
      Your Name: <input type="text" name="fullName" id="fullName" />
      <br/>
      Fovorite Color:
      <select name="favoriteColor" id="favoriteColor">
         <option value="red">Red</option>
         <option value="blue">Blue</option>
         <option value="green">Green</option>
      </select>
      <br>
      <button onclick="writeCookies()">Write Cookies</button>
      <button onclick="killCookies()">Kill Cookies</button>
      <br/><br/>
      <!--  Read Cookie Results: -->
      <hr />
      Read Cookie Results:
      <div id="logArea" style="border:1px solid #ccc;padding: 5px;height:150px;">
      </div>
      <button  value = "Get Cookie" onclick = "readCookie()">Read cookies</button>
   </body>
</html>
 
cookie-example.js
// maxAge: Seconds
function writeCookies(maxAge) {
    let expires = new Date();
    expires.setSeconds(expires.getSeconds() + maxAge);

    let selectedColor = document.getElementById("favoriteColor").value;
    let cookie1 = "favoriteColor=" + selectedColor + ";";
    cookie1 += "Expires=" + expires.toUTCString() + ";";
    cookie1 += "Path=/"; // Path: Required in Chrome!!

    // Write Cookie 1
    document.cookie = cookie1;


    let fullName = document.getElementById("fullName").value;
    let cookie2 = "fullName=" + fullName + ";";
    cookie2 += "Max-Age=" + maxAge + ";"; // Seconds
    cookie2 += "Path=/"; // Path: Required in Chrome!!

    // Write Cookie 2
     document.cookie = cookie2;
    alert("Write Successful!");
}

function killCookies() {
    writeCookies(0);
}

function readCookie() {
    var allCookies = document.cookie;

    let logText = "All Cookies : " + allCookies + "<br/>";

    // Get all the cookies pairs in an array
    let cookieArray = allCookies.split(';');

    // Now take key value pair out of this array
    for (var i = 0; i < cookieArray.length; i++) {
        let kvArray = cookieArray[i].split('=');

        logText += "Cookie name: " + kvArray[0] + "<br/>";
        logText += "Cookie value: " + kvArray[1] + "<br/>";
    }

    document.getElementById("logArea").innerHTML = logText;
}
 
Sie können das Beispiel durch die direkte Durchführung der File cookie-example.html auf dem Browser  Firefox prüfen. Mit dem Browser  Chrome müssen Sie dieser File auf einem  HTTP Server laufen.
Den Name und Ihre beliebte Farbe in  Form eingeben, danach klicken Sie auf die Button  "Write Cookies". Die  Cookie werden erstellt und in den Computer des Benutzer gespeichert.