Erstellen, lesen und löschen Sie Cookies mit JavaScript und jQuery

1. Was ist ein Cookie
2. Cookies mit JavaScript erstellen, lesen und löschen
3. Erstellen, lesen und löschen Sie Cookies mit jQuery

Dieser Artikel befasst sich mit den Cookies des Browsers. Wir erfahren alles Wissenswerte über Cookies und ihre verschiedenen Eigenschaften.

Später verwenden wir JavaScript und jQuery, um Cookies zu erstellen, zu lesen und zu löschen.

Was ist ein Cookie

Cookies sind Textdateien auf Ihrem Computer, die Daten enthalten. Ein Webserver beendet die Verbindung nach dem Senden einer Webseite an einen Browser und vergisst den Benutzer vollständig.

Das Erinnern von Benutzerinformationen war eine Herausforderung, für die Cookies entwickelt wurden.

Das Cookie merkt sich den Namen oder die Benutzer-ID des Benutzers für den späteren Besuch der Website. Cookies werden in Schlüssel-Wert-Paaren erstellt und abgerufen.

Wenn es um Online-Shops geht, speichert die Datenbank die Daten nicht, wenn ein Benutzer einige Artikel in den Warenkorb legt, nachdem er viel Zeit damit verbracht hat, seine Auswahl zu treffen, und nicht angemeldet ist.

Wenn der Benutzer seinen Browser schließt und dieselbe Seite erneut öffnet, ist der Warenkorb leer, was ihn ärgern kann. Cookies springen dann ein, um den Tag zu retten, indem sie Benutzerinformationen speichern und ihren aktuellen Zustand beibehalten.

Um die verfügbaren Cookies einer Website zu sehen, gehen Sie auf Inspect oder drücken Sie Strg+Shift+I. Gehen Sie dann auf den Reiter Bewerbungen.

Unter Speicherung sehen Sie den Abschnitt Cookies. Es sieht aus wie das:

Hier sind mehrere Felder sichtbar. Dies sind die Attribute eines Cookies.

Sehen wir uns jedes dieser Attribute im Detail an.

1. Name - Dies ist der Name des Cookies.
2. Wert - Dies ist der Wert des Cookies.
3. Domain - Dies ist die Domain Ihrer Website.
4. Pfad – Dies ist die URL der Webseite oder des Verzeichnisses, wo das Cookie gesetzt wurde. Lassen Sie dieses Feld leer, wenn Sie das Cookie von einem Verzeichnis oder einer Seite abrufen möchten.
5. Expires/Max-Age – Dies ist das Ablaufdatum des Cookies, nach dem das Cookie gelöscht wird.
6. Größe - Dies ist die Größe des Cookies.
7. HttpOnly – Ein Cookie mit dem Attribut HttpOnly steht dem JavaScript Document.cookie nicht zur Verfügung. Es wird nur an den Server geliefert.
8. Sicher - Auf das Cookie kann nur mit einem sicheren Server zugegriffen werden, wenn dieses Feld das Wort sicher enthält. Wird dieses Feld leer gelassen, entfällt diese Einschränkung.
9. SameSite – Mit dieser Funktion können Server angeben, ob Cookies bei Cross-Site-Anfragen gesendet werden sollen oder nicht. Dadurch wird das Risiko von Cross-Site-Request-Forgery-Angriffen (CSRF) gemindert. Dieser Parameter hat drei Optionen: Strict, Lax und None.
10. Partitionsschlüssel – Die Top-Level-URL des Browsers war aktiv, als er zum ersten Mal eine Anfrage an den Endpunkt sendete, der das Cookie so einstellte, dass es als Partitionsschlüssel für ein Cookie dient.
11. Priorität - Die Cookie-Priorität ermöglicht es Servern, ältere Cookies mit niedrigeren Prioritäten zu löschen und ältere mit höheren Prioritäten länger aufzubewahren.

Cookies mit JavaScript erstellen, lesen und löschen

JavaScript macht es unglaublich einfach, Cookies auf unserer Website einzurichten, zu lesen und zu löschen. Sie können mit dem Dokument verbundene Cookies lesen und schreiben, indem Sie die Dokument-Eigenschaft cookie verwenden.

Es fungiert als Getter und Setter für die Cookie-Werte.

Erstellen Sie ein Cookie

Mit dem document.cookie können wir in JavaScript ein Cookie erstellen und diesem ein Schlüssel-Wert-Paar zuweisen.

document.cookie = 'title=developer; expires=Mon, 21 Nov 2022 12:00:00 UTC;';

Wenn Sie die obige Anweisung ausführen, wird ein Cookie im Browser erstellt. Beachten Sie, dass wir jeden Wert in einem Schlüssel-Wert-Paar angegeben haben.

Außerdem legen wir das Ablaufdatum fest, denn wenn Sie es nicht angeben, wird das Cookie beim Schließen des Browsers gelöscht. Der Hauptzweck des Cookies ist das Speichern von Informationen, daher sollte das Ablaufdatum angegeben werden.

Sehen wir uns das Cookie im Browser an.

Das Cookie mit dem angegebenen Schlüssel und Wert wird erstellt, wie in der Ausgabe zu sehen ist. Sie können mehrere Cookies mit unterschiedlichen Schlüssel-Wert-Paaren auf einer einzigen Website erstellen.

In jedem Cookie können unterschiedliche Informationen gespeichert werden.

Nehmen wir an, wir möchten drei Cookies erstellen; eine mit name, die zweite mit Alter und die dritte mit Informationen über das Geschlecht einer Person. Überprüfen Sie den folgenden Code.

document.cookie = 'name=John; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Age=25; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

Diese Anweisungen erstellen drei Cookies im Browser. Sehen Sie sich die Ausgabe unten an.

Mit der Anweisung document.cookie können Sie beliebig viele Cookies erstellen. Das wiederholte Schreiben dieses Satzes klingt jedoch nach einem monotonen Prozess, also lassen Sie uns eine generische Methode entwickeln.

Beachten Sie den folgenden Code, um die Funktion zum Generieren der Cookies zu erstellen.

function createCookie(name, value, ex_days) {
  if (ex_days) {
    const date = new Date();
    date.setTime(date.getTime() + (ex_days * 24 * 60 * 60 * 1000));
    var expires = 'expires=' + date.toUTCString();
  } else {
    var expires = '';
  }
  document.cookie = name + '=' + value + ';' + expires + ';';
}

Die Funktion createCookie erhält drei Argumente. Der erste ist der name.

Sie können davon ausgehen, dass es sich um den Schlüssel handelt. Der zweite ist der Wert und der dritte die Ablaufdauer.

Sie können die Funktion so aufrufen createCookie("CookieKey", "CookieValue", 50). Es erstellt das Cookie mit dem Namen CookieKey und setzt CookieValue als Wert.

Das Ablaufdatum wird auf die nächsten 50 Tage ab dem aktuellen Datum festgelegt.

Lesen Sie einen Keks

Mithilfe von JavaScript können wir die Cookies, die wir auf unserer Website eingerichtet haben, schnell lesen. Wir erhalten die Schlüssel-Wert-Paare beim Zugriff auf die Cookies, da wir sie in Schlüssel-Wert-Paaren speichern.

Beachten Sie den folgenden Code, um die Methode zum Lesen der Cookies zu lernen.

document.write(document.cookie);

Wie Sie im obigen Code sehen, verwenden wir den Befehl document.cookie, um alle auf unserer Website verfügbaren Cookies abzurufen.

Rufen wir alle von uns erstellten Cookies ab. Sehen Sie sich die Ausgabe unten an.

Jedes Cookie wird, wie bereits erwähnt, als Schlüssel-Wert-Paar erhalten. Es ist einfach, die Cookies zu lesen.

Lassen Sie uns nun tief in einige erstaunliche Dinge eintauchen. Die Anweisung document.cookie stellt eine Liste der Cookies unserer Website bereit, aber was ist, wenn wir ein bestimmtes Cookie lesen möchten?

Lassen Sie uns lernen, wie man einen Keks liest; es ist einfach. Wir werden die Funktion zum Abrufen des angegebenen Cookies erstellen.

Überprüfen Sie den folgenden Code.

function getCookie(cookie_name) {
  let name = cookie_name + '=';
  let cookie_array = document.cookie.split(';');
  for (let i = 0; i < cookie_array.length; i++) {
    let cookie = cookie_array[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return '';
}

Wir werden diesen Code an den drei Cookies testen, die wir im Abschnitt Create a Cookie erstellt haben. Die Funktion getCookie könnte Sie verwirren.

Mach dir keine Sorge. Lassen Sie uns jede Codezeile im Detail erklären, und Sie werden diese Methode klar verstehen.

1. Wir übergeben den Cookie-Namen an die Funktion, um die Details eines bestimmten Cookies anhand seines Namens zu erhalten.

2. Wir speichern die Informationen in Cookies in Schlüssel-Wert-Paaren. Wenn wir den Namen mit einem Wert speichern wollen, schreiben wir Name="CookieName". Wenn wir das Cookie abrufen, erhalten wir denselben Wert.

3. Zuerst müssen wir = an unseren angegebenen Cookie-Namen anhängen, um danach zu suchen. Dasselbe haben wir in der ersten Codezeile gemacht.

4. Als Nächstes benötigen wir das Cookies-Array, um es zu durchlaufen und das benötigte Cookie zu finden. Angenommen, wir erhalten alle Cookies über document.cookie; wir würden eher einen String als ein Array erhalten.

   Daher verwenden wir document.cookie.split(';'), um ein Array zu erhalten. Wir erhalten das folgende Array.

   

5. Im nächsten Schritt haben wir eine for-Schleife erstellt, die jeden Cookie im Array durchläuft. Wir speichern jedes Cookie in der Variable cookie, um damit Operationen auszuführen.

6. Die while-Schleife innerhalb der for-Schleife ist wichtig. Wir entfernen jeglichen zusätzlichen Platz aus dem aktuellen Cookie, falls vorhanden.

   Wenn Sie das obige Array beobachten, gibt es sowohl in den Cookies Alter als auch Geschlecht einen Leerraum. Die while-Schleife entfernt diese zusätzlichen Leerzeichen.

7. Im letzten haben wir die JavaScript-Methode indexOf() verwendet, die uns den Index des ersten Vorkommens des angegebenen Parameters liefert. Wir haben den Namen des Cookies als Parameter übergeben und überprüft, ob der Index gleich Null ist, dann haben wir unser erforderliches Cookie gefunden.

Löschen Sie ein Cookie

JavaScript macht es einfach, ein Cookie zu löschen. Das Cookie wird automatisch zerstört, wenn wir nur das Ablaufdatum des Cookies auf ein früheres setzen.

Auch wenn Sie beim Erstellen des Cookies kein Ablaufdatum angegeben haben, können Sie es trotzdem löschen, indem Sie den Wert seines Enddatums auf einen früheren Zeitpunkt ändern.

Wir haben derzeit drei Cookies in unserem Browser: Alter, Geschlecht und name. Lassen Sie uns das Geschlecht-Cookie entfernen.

Der folgende Befehl erstellte das Gender-Cookie.

document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

Sie läuft voraussichtlich am 21. November 2022 aus. Wenn Sie das Datum auf ein Datum vor dem aktuellen Datum ändern, wird das Cookie gelöscht.

Angenommen, wir setzen das Ablaufdatum auf 1. Januar 2000. Mal sehen, welche Cookies jetzt im Browser verfügbar sein werden.

Erstellen, lesen und löschen Sie Cookies mit jQuery

Bisher haben wir über die Verwendung von JavaScript zum Erstellen, Lesen und Löschen von Cookies gesprochen. In diesem Abschnitt gehen wir die gleichen drei Funktionalitäten mit jQuery durch.

Die JavaScript-Bibliothek jQuery macht es uns sehr einfach, JavaScript zu verwenden.

Wir werden darüber sprechen, wie jQuery funktioniert und wie es einfacher zu verwenden ist als JavaScript, um Cookies zu erstellen, zu lesen und zu löschen. Wir verwenden die jquery-cookie-Bibliothek, um Operationen mit den Cookies zu erstellen und auszuführen.

Erstellen Sie ein Cookie

Die cookie-Bibliothek von jQuery gibt uns eine cookie()-Methode, um Cookies zu erstellen, indem sie den Namen und Wert bereitstellt.

Syntax:

$.cookie('name', 'value', {settings});

Für diese Methode gibt es drei Parameter.

1. Name - Dies ist der Schlüssel des Cookies.
2. Wert - Dies ist der Wert des Cookies.
3. Einstellungen - Dies ist ein Objekt, mit dem zusätzliche Cookie-Parameter festgelegt werden können.

Sehen Sie sich den folgenden Code an, um zu sehen, wie jQuery das Cookie erstellen kann.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title","Developer");
        </script>
    </head>
    <body></body>
</html>

Ausgang:

Es wurde ein Cookie mit dem Namen Title und dem Wert Developer erstellt. Wir haben für dieses Cookie kein Ablaufdatum angegeben, und wie Sie in der Ausgabe sehen können, wird in der Spalte Expires kein Ablaufdatum erwähnt.

Jetzt legen wir das Ablaufdatum des soeben erstellten Cookies fest. Hier ist wie:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title", "Developer", { expires: 20 });
        </script>
    </head>
    <body></body>
</html>

Ausgang:

Sie können jetzt das Ablaufdatum in der Spalte Läuft ab sehen, da wir das Ablaufdatum auf 20 gesetzt haben, was bedeutet, dass dieses Cookie 20 Tage ab dem heutigen Tag abläuft.

Lesen Sie einen Keks

Im Gegensatz zu JavaScript ist das Auslesen von Cookies mit jQuery einfacher. Wie Sie sich erinnern, mussten wir in JavaScript eine Funktion konstruieren, um ein bestimmtes Cookie zu lesen.

jQuery hat jedoch eine eingebaute Funktion, die es uns ermöglicht, erforderliche Cookies zu lesen, indem wir einfach ihre Namen als Argumente übergeben.

Die Methode $.cookie("CookieName") wird verwendet, um das spezifische Cookie auszulesen. Schauen Sie sich den Code unten an.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            var cookie = $.cookie("Title");
            document.write(cookie);
        </script>
    </head>
    <body></body>
</html>

Wir haben der Funktion den Title als Parameter übergeben, das ist der Name unseres erstellten Cookies. Es sollte uns seinen Wert zurückgeben, der Entwickler ist.

Schauen Sie sich die Ausgabe an.

Löschen Sie ein Cookie

In Bezug auf die Benutzerfreundlichkeit von jQuery verfügt es über eine Methode namens removeCookie(), die Cookies nach Namen entfernt. JavaScript hat keine eingebaute Funktion zum Löschen von Cookies.

Wir müssen das Ablaufdatum auf ein früheres Datum setzen, um sie zu löschen. Sehen Sie sich den folgenden Code zum Löschen des Cookies an.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.removeCookie("Title");
        </script>
    </head>
    <body></body>
</html>