Wie man mit Cookies in JavaScript umgeht

viele Jahre müssen viele Webentwickler Daten auf der Client -Seite speichern. Bevor HTML5 und seine neuen Mechanismen auftauchten, verwendete jeder Entwickler Cookie , um dieses Ziel zu erreichen. Leider kann die Verwendung von Cookies in JavaScript viel Ärger verursachen. In diesem Artikel wird erläutert, was Cookies sind und wie man Funktionen erstellt, um Cookies zu erstellen, abzurufen und zu löschen.

Schlüsselpunkte

• Cookies sind Datenfragmente, die von der Website gesendet und lokal vom Browser des Benutzers gespeichert werden. Da HTTP staatenlos ist, werden sie verwendet, um die Benutzeraktivität zu verfolgen. Cookies können jedoch nur bis zu 4 KB Daten speichern und jede HTTP -Anforderung wird an den Server gesendet, wodurch die Netzwerkbandbreite konsumiert werden kann.
• Infolge von HTML5 ist eine Alternative zu Cookies entstanden. Dazu gehören die Webspeicher-API (Speicher-Namens-Wert-Paar) und die Web-SQL-Datenbank-API (Speicherdaten in einer Datenbank, die mit SQL-Varianten abgefragt werden kann). Eine andere Alternative ist die Indexdatenbank -API, die eine Datenbank definiert, die Datensätze enthält, die einfache Werte und hierarchische Objekte enthalten.
• JavaScript kann das Attribut document.cookie Cookies zum Erstellen, Abrufen und Löschen verwenden. Der Umgang mit Cookies in JavaScript kann jedoch aufgrund des Mangels an nativen Methoden eine Herausforderung sein. Entwickler müssen normalerweise ihre eigenen Funktionen erstellen, um Cookies zu verwalten.
• Cookies haben eine einfache Struktur, die aus semikolon-getrennten Schlüsselwertpaaren besteht, mit Tasten und Werten, die durch gleiche Vorzeichen getrennt sind. Sie können optional ein Ablaufdatum haben und werden nach Ablauf gelöscht. Wenn kein Ablaufdatum bereitgestellt wird, dauert der Cookie bis zur Sitzung oder der Browser schließt. Sie können auch die Domäne und den Pfad angeben, die in Cookies gelesen und geschrieben werden können.

Was sind Cookies?

Cookies sind Datenstücke, die von einer Website gesendet und lokal vom Browser des Benutzers gespeichert werden. Cookies sind benötigt, da HTTP als staatenlos ist. Dies bedeutet, dass HTTP selbst die frühere Aktivität des Benutzers nicht verfolgen kann. Die Verwendung von Cookies ist eine Möglichkeit, Zustände zu erstellen.

Verwenden Sie Cookies?

Jetzt verwenden fast alle Websites Cookies. Cookies sind jedoch sehr begrenzt, da sie nur bis zu 4 KB Daten speichern können. Darüber hinaus behaupten viele Entwickler, dass Cookies jedes Mal, wenn eine HTTP -Anfrage an den Server gesendet wird, große Cookies viel Netzwerkbandbreite verbrauchen, was die Leistung beeinträchtigt. Remy Sharp machte eine weitere wichtige Kritik an Keksen in seinem mitautorisierten Buch zur Einführung von HTML5. Dies kann für mobile Verbindungen katastrophal sein. Eine weitere wichtige Sache, an die Sie sich erinnern sollten, ist, dass Ihre Website, wenn Sie europäische Besucher haben, die EU -Richtlinie der EU Electronic Datenschutz vom 26. Mai 2012 einhalten muss. Wenn Sie noch nie davon gehört haben, lesen Sie jetzt, warum Ihre Website jetzt in Europa illegal ist. In den letzten Jahren haben die Menschen versucht, Alternativen zu Keksen zu finden. Aufgrund der Entstehung von HTML5 sind einige neue Technologien entstanden. Die erste ist die Webspeicher-API, die eine Methode zum Speichern von Namenswertpaaren hat. Für einen Überblick über die Web Storage -API empfehlen wir Ihnen, den Überblick über die Webspeicher -API zu lesen. Die zweite Alternative ist die Web SQL -Datenbank -API, die Daten in einer Datenbank speichert, die mit SQL -Varianten abgefragt werden kann. Obwohl Web SQL gut unterstützt, wird dieser Standard nicht mehr aktiv gewartet. Last but not least ist die Indexdatenbank -API, die eine Datenbank definiert, die Datensätze enthält, die einfache Werte und hierarchische Objekte enthalten. Weitere Informationen zu IndexedDB finden Sie in "eingehender Lernen von HTML5 IndexedDB". Leider wird IndexedDB nicht weit verbreitet, sodass Sie sich wahrscheinlich nicht darauf verlassen sollten. Wie auch immer Sie mögen, es gibt einige wichtige Punkte zu wissen. Während alle diese APIs einen lokalen Speicher bieten, der Cookies ähnelt, senden sie ihre Daten nicht an den Server zurück. In den meisten Fällen verwenden Sie also sowohl Cookies als auch eine der Speicher -APIs. Technisch gesehen kann der gleiche Effekt mit AJAX erreicht werden, dies kann jedoch die Aufgabe überkomplizieren und zusätzlichen Code erfordern.

wie man Cookies

macht

Die Struktur eines Keks ist sehr einfach. Es sind nur ein paar Schlüsselwertpaare. Die Paare werden durch Semikolonen getrennt, und das gleiche Vorzeichencharakter trennt den Schlüssel von seinem Wert. Cookies können ausgewählt werden, um ein Ablaufdatum zu haben, und werden nach Ablauf gelöscht. Wenn kein Ablaufdatum angegeben wird, dauert der Cookie, bis die Sitzung oder der Browser schließt. Wenn Sie das Ablaufdatum auf die Vergangenheit festlegen, löscht der Browser die Cookies. Beachten Sie, dass das Format des Datums wichtig ist, da es UTC/GMT sein muss. Darüber hinaus können Sie die Domäne und den Pfad angeben, auf den Cookies gelesen und geschrieben werden können. Standardmäßig lautet der Pfadwert "/", was bedeutet, dass das Cookie für alle Pfade in einer bestimmten Domäne sichtbar ist. Wenn Sie keine Domain angeben, gehört sie zur Seite, auf der die Cookies festgelegt werden. Die Art und Weise, wie diese Daten festgelegt sind, ist ebenfalls wichtig. Die Reihenfolge sollte: WAHRE AUSGABE; Das folgende Beispiel zeigt ein Keks, das auf allen Wegen der Domäne zugänglich ist, und nur ein Schlüsselwertpaar.

<code>visits=3; path=/;</code>

Das folgende Beispiel zeigt ein Cookie, das auf allen Wegen der Domäne (Standard ist) zugänglich und am 31. Oktober 2012 um 11:00 Uhr abgelaufen ist.

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

Skript cookies

Ich habe bisher erklärt, was Kekse sind, und einige ihrer Vor- und Nachteile. Jetzt ist es an der Zeit zu sehen, welche Funktionen JavaScript aussetzt, um sie zu behandeln. Leider möchte ich als erstes sagen, dass JavaScript keine native Art zu Easy Cookies hat. JavaScript kann Cookies mithilfe des document.cookie -attributs erstellen, abrufen und löschen, dies ist jedoch nicht zufriedenstellend. Jedes Mal, wenn Sie sich mit split(), substring() und für Schleifen befassen müssen. Beachten Sie, dass Sie sich document.cookie als Zeichenfolgenvariable vorstellen können, aber wirklich mehr als nur eine String -Variable. Siehe zum Beispiel das folgende Skript:

<code>visits=3; path=/;</code>

Wenn Sie dann document.cookie drucken, erhalten Sie unerwartete Ergebnisse, wie unten gezeigt:

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

Bisher haben Sie die Schwierigkeit gesehen, Kekse in JavaScript zu behandeln. Jetzt ist es also an der Zeit, unsere eigenen Funktionen zu erstellen, um sie einfach zu verwalten. Die folgenden Funktionen helfen Ihnen beim Erstellen von Cookies. Beachten Sie, dass der Parameter expires eine Instanz des Datumsobjekts oder eine Nummer sein kann, die die Anzahl der Tage darstellt. Letzteres kann eine negative Zahl sein, die das Ablaufdatum für die Vergangenheit festlegt.

<code class="language-javascript">document.cookie = "visits=3; path=/;";
document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";</code>

Sie können diese Funktion so aufrufen.

<code class="language-javascript">console.log(document.cookie);
// 打印 visits=3; last-visit=Mon, 15 Oct 2012 19:36:00</code>

Jetzt, da Sie Cookies festgelegt haben, müssen Sie sie abrufen können. Sie werden dies mit der angegebenen Taste und der folgenden getCookie() -Funktion tun. Wenn es gefunden wird, gibt es den Wert des Schlüssels zurück, andernfalls gibt es NULL zurück.

<code class="language-javascript">function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";

  if (expires) {
    // 如果是日期
    if(expires instanceof Date) {
      // 如果不是有效的日期
      if (isNaN(expires.getTime()))
       expires = new Date();
    }
    else
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

    cookie += "expires=" + expires.toGMTString() + ";";
  }

  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";

  document.cookie = cookie;
}</code>

Die Verwendung von getCookie() ist sehr einfach. Sie übergeben einfach den Schlüssel als Parameter, wie unten gezeigt.

<code class="language-javascript">createCookie("website", "audero.it", new Date(new Date().getTime() + 10000));
createCookie("author", "aurelio", 30);</code>

Jetzt brauchen wir die letzte Funktion, um das Cookie zu löschen. Die angezeigte Funktion ist sehr einfach, da sie auf getCookie() beruht, um zu testen, ob der angegebene Name festgelegt ist, und auf createCookie(), um das Ablaufdatum auf die Vergangenheit festzulegen.

<code class="language-javascript">function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
}</code>

In Anbetracht dieser Funktion, um ein Cookie zu löschen, können Sie einfach schreiben:

<code class="language-javascript">console.log(getCookie("author")); // 打印 aurelio
console.log(getCookie("nothing")); // 打印 null</code>

Verwenden Sie die angezeigten Funktionen. Sie können Cookies problemlos verwalten. Es gibt viele andere Cookie -Handhabungsfunktionen im Netzwerk. Unter den zahlreichen Funktionen, die Sie finden können, möchte ich Ihnen die Funktionen zeigen, die vom Front-End-Entwicklungsguru Peter-Paul Koch (P.P.K.) auf QuirksMode.com geschrieben wurden. Ich möchte ihm dafür danken, dass er sie erlaubt hat, sie in diesen Artikel aufzunehmen. P.P.K. Die Funktion zum Erstellen eines Keks ist unten gezeigt.

<code class="language-javascript">function deleteCookie(name, path, domain) {
  // 如果 Cookie 存在
  if (getCookie(name))
    createCookie(name, "", -1, path, domain);
}</code>

Verwenden Sie die folgende Funktion, um Cookies abzurufen.

<code class="language-javascript">deleteCookie("author");
console.log(getCookie("author")); // 现在打印 null</code>

Dies ist eine Funktion zum Löschen von Cookies.

<code class="language-javascript">function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}</code>

Schlussfolgerung

In diesem Artikel haben Sie gelernt, was Cookies sind, wie sie hergestellt werden, und welche Vor- und Nachteile. Sie haben auch gelernt, wie man mit kundenspezifischen Funktionen mit Cookies umgeht. Wie ich in meinem vorherigen Beitrag betonte, fehlt JavaScript einige grundlegende Dienstprogrammfunktionen. Glücklicherweise können Sie problemlos Ihre eigenen Funktionen erstellen oder das Netzwerk durchsuchen, um Ihr Problem zu lösen.

FAQs (FAQs) zum Umgang mit Cookies in JavaScript

(Der FAQ-Teil wird hier weggelassen, da die Länge zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der Inhalt des FAQ-Teils ist sehr mit dem Originaltext übereinstimmend und Pseudooriginalität ist schwierig, schwierig,, Halten Sie also einfach den Originaltext.)

Das obige ist der detaillierte Inhalt vonWie man mit Cookies in JavaScript umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!