Holen Sie sich ein Cookie nach Namen in JavaScript

Waqar Aslam 12 Oktober 2023
Holen Sie sich ein Cookie nach Namen in JavaScript

Cookies sind Informationen, die in Form von sehr kleinen Textdateien auf Ihrem Computer gespeichert werden. Wenn ein Webserver eine Webseite an einen Browser gesendet hat, wird die Verbindung zwischen den beiden getrennt und der Server vergisst sofort alle Informationen über den Benutzer.

Aus folgenden Gründen wurden Cookies zunächst als Lösung für die Frage entwickelt, wie man sich Informationen über den Benutzer merken kann.

  1. Der Name eines Benutzers kann in einem Cookie gespeichert werden, wenn diese Person eine bestimmte Website besucht.
  2. Wenn der Benutzer später auf die Website zurückkehrt, merkt sich das Cookie seinen Namen.

Als erstes werden wir eine Funktion konstruieren, die wir getACookie nennen, und wir werden cookieName als Argument der Methode verwenden.

Als nächstes erstellen wir eine Variable, die wir als nameOfCookie bezeichnen und füllen sie mit dem Text, der nach cookieName + '=' sucht.

let nameOfCookie = cookieName + '=';

Nachdem wir nun eine neue Variable mit dem Namen cookieDecoded erstellt haben, dekodieren wir den Cookie-String mit der Eigenschaft decodeURIComponent.

Zuvor hatten wir document.cookie verwendet, um alle Cookies abzurufen, um Sonderzeichen wie $ zu verarbeiten, aber jetzt verwenden wir stattdessen diese neue Variable.

Durch die Verwendung des Eigenschaftscookies Dokument ist es möglich, Cookies zu lesen und zu schreiben, die mit dem Dokument verbunden sind. Es ist ein Getter und Setter für die tatsächlichen Werte der Cookies, die gespeichert werden.

let cookieDecoded = decodeURIComponent(document.cookie);

Erstellen Sie eine neue Variable namens cookieArray, die das Array enthält, das erzeugt wird, nachdem wir die Eigenschaft .split(';') verwendet haben, um das Cookie in ein Array am ; zu trennen. Charakter.

let cookieArray = cookieDecoded.split(';');

Im weiteren Verlauf werden wir das cookieArray durchlaufen.

for (let i = 0; i < cookieArray.length; i++) ```

Innerhalb der Schleife erstellen wir eine neue Variable, die wir als `cIndex` bezeichnen. Diese Variable enthält den Wert des spezifischen Index von `cookieArray`, den der Wert von `i` bestimmt.

```javascript
let cIndex = cookieArray[i];

Das Attribut charAt() initiiert eine while-Schleife, die den Wert des Zeichens am Index 0 des cIndex-Arrays untersucht, um festzustellen, ob es leer ist oder nicht.

while (cIndex.charAt(0) == ' ') ```

Wenn der erste Index von `cIndex` leer ist, wird der Wert am zweiten Index in der Variablen `cIndex` gespeichert, indem die Eigenschaft `subString()` verwendet wird.

```javascript
cIndex = cIndex.substring(1);

Wenn der Wert, den wir vom Ausdruck cIndex.indexOf(nameOfCookie) erhalten, gleich Null ist, dann ist unsere Bedingung erfüllt und wir geben den von cIndex erhaltenen Wert zurück.

if (cIndex.indexOf(nameOfCookie) == 0) ```

<!--adsense-->

Wenn die Bedingung zu `true` ausgewertet wird, geben wir den Wert des Cookies zurück, der durch die `c.substring-Funktion (name.length, c.length)` dargestellt wird. Auch wenn sich herausstellt, dass die Bedingung `false` ist, geben wir einen leeren String zurück.

```javascript
{ return cIndex.substring(nameOfCookie.length, cIndex.length); }
return '';

Vollständiger Quellcode:

function getACookie(cookieName) {
  let nameOfCookie = cookieName + '=';
  let cookieDecoded = decodeURIComponent(document.cookie);
  let cookieArray = cookieDecoded.split(';');

  for (let i = 0; i < cookieArray.length; i++) {
    let cIndex = cookieArray[i];
    while (cIndex.charAt(0) == ' ') {
      cIndex = cIndex.substring(1);
    }
    if (cIndex.indexOf(nameOfCookie) == 0) {
      return cIndex.substring(nameOfCookie.length, cIndex.length);
    }
  }
  return '';
}
Waqar Aslam avatar Waqar Aslam avatar

I am Waqar having 5+ years of software engineering experience. I have been in the industry as a javascript web and mobile developer for 3 years working with multiple frameworks such as nodejs, react js, react native, Ionic, and angular js. After which I Switched to flutter mobile development. I have 2 years of experience building android and ios apps with flutter. For the backend, I have experience with rest APIs, Aws, and firebase. I have also written articles related to problem-solving and best practices in C, C++, Javascript, C#, and power shell.

LinkedIn

Verwandter Artikel - JavaScript Cookies