So setzen Sie und lesen Sie einen Cookie -Wert mit JavaScript und lesen Sie einen Cookie -Wert?

Cookies sind kleine Textdateien, die ein kleines Stück Daten auf dem Computer des Benutzers (ca. 4 KB) aufbewahren und zur Speicherung von Informationen über einen Benutzer verwendet werden, beispielsweise die Einstellungen eines Benutzers für eine Website, die die Website abrufen kann, um die Webseite zu personalisieren, wenn Der Benutzer besucht die Website erneut. Um es einfach auszudrücken, helfen Cookies bei einem bequemeren und persönlicheren Website -Besuch für die Benutzer. Ein Cookie wird von einer Website an Ihren Computer gesendet, wenn Sie sie besuchen.

Wir werden darüber sprechen, wie man einen Cookie -Wert mit JavaScript in diesem Artikel festlegt, überprüfen und lesen. Bevor ich jedoch weiter gehe, lasse ich den Punkt betonen, dass Cookies nicht zum Speichern kritischer/vertraulicher Informationen wie Passwörter oder Details Ihrer Kreditkarte verwendet werden sollten, da böswillige Personen darauf zugreifen können.

Erstellen eines Keks

Der dokumentieren.Plätzchen Die Eigenschaft erstellt, liest und löscht Cookies, und dies ist die Eigenschaft, die alle mit einem Dokument verbundenen Cookies darstellt. Um zuerst ein Cookie zu erstellen, sollten wir wissen, dass Cookies beispielsweise in Namenswertepaaren gespeichert werden:

Benutzername = Obama;

Lassen Sie uns jetzt ein Cookie in JavaScript erstellen:

dokumentieren.Cookie = "Benutzername = Obama";

Die Lebensdauer eines Cookies ist auf die Dauer der aktuellen Browser -Sitzung eingestellt, was bedeutet, dass er abgelaufen ist, wenn der Benutzer den Browser schließt. Um dieses Problem zu lösen, verwenden wir die Maximalzeit Attribut, das sicherstellt. Im Attribut des maximalen Zeitalters können wir die Lebensdauer eines Keks in Sekunden angeben, wie lange der Keks bleibt, bevor es gelöscht wird. Die Lebensdauer des Keks im folgenden Code beträgt 30 Tage:

dokumentieren.cookie = "userername = obama; max-alages =" + 30*24*60*60;

Wir können auch die verwenden erlöschen Attribut, das im GMT/UTC -Format und in diesem Datum das Cookie ausgeht:

dokumentieren.Cookie = "Benutzername = Obama; läuft = Do, 26. September 2021 12:00:00 UTC";

Ein weiteres Attribut, das wir bei der Erstellung von Cookie verwenden können, ist das Weg Attribut, das dem Browser mitteilt, zu welchem ​​Weg das Cookie gehört, und nicht den Standardpfad, der die aktuelle Seite ist.

dokumentieren.Cookie = "Benutzername = Obama; läuft = Do, 26. September 2021 12:00:00 UTC; PATH =/";

Wir müssen das JavaScript verwenden Encodeuricomponent () Da der Kekswert Kommas, Semikolons und Räume und die enthält Encodeuricomponenet () stellt sicher, dass die Saite nicht die Kommas, Semikolons und Räume enthält, da diese in Cookies nicht erlaubt sind.

dokumentieren.cookie = "userername =" + codericomponent ("obama");

Cookie lesen

Wir können alle Cookies einer aktuellen Domäne lesen oder erhalten, indem wir die verwenden dokumentieren.Plätzchen:

var x = Dokument.Plätzchen;

Genau wie beim Erstellen eines Cookies, den wir benutzt haben Encodeuricomponent () Beim Lesen eines Cookies müssen wir verwenden decodeuricomponenet ():

dokumentieren.Cookie = "userername =" + decodeuricomponent ("Obama");

Keks löschen

Wir können auch ein Cookie löschen und in JavaScript ist der Vorgang sehr einfach, da wir keinen Cookie -Wert angeben müssen, sondern dass wir den Parameter Ablauf verwenden und mit einem früheren Datum aktualisieren können: zum Beispiel:

dokumentieren.Cookie = "Benutzername = Obama; läuft = dhu, 20. November 2018 12:00:00 UTC; PATH =/";

Keks löschen

Wir können auch ein Cookie löschen und in JavaScript ist der Vorgang sehr einfach, da wir keinen Cookie -Wert angeben müssen, sondern dass wir den Parameter Ablauf verwenden und mit einem früheren Datum aktualisieren können: zum Beispiel:

dokumentieren.Cookie = "Benutzername = Obama; läuft = dhu, 20. November 2018 12:00:00 UTC; PATH =/";

Cookie -Beispiel in JavaScript

Nachdem wir nun wissen, was ein Cookie ist, wie man ein Cookie erstellt oder liest, kombinieren wir alles, was wir gelernt haben, und erstellen Sie ein Cookie, das einen Namen speichert, wenn ein Benutzer unsere Website besucht. Wir werden vom Benutzer einen Eingabemamen nehmen, wenn der Benutzer zum ersten Mal unsere Website eingibt und ihn in einem Cookie speichert. Wenn der Benutzer wieder die Website betritt, erhält er/sie eine willkommene Nachricht auf der Website.

Um das obige Beispiel zu implementieren, benötigen wir 3 Funktionen, in denen eine der Funktionen ein Cookie festgelegt wird, einer Lesen/Erhalten eines Cookie -Werts und die letzte Funktion überprüft den Cookie -Wert.

Setzen Sie die Cookie -Funktion

Funktionsetcookie (Benutzername, Wert, Ablauf)
const date = neuer Datum ();
Datum.SetTime (Datum.GetTime () + (Ablauf * 24 * 60 * 60 * 1000));
var expires = "expires ="+Datum.toutcstring ();
dokumentieren.Cookie = Benutzername + "=" + Wert + ";" + läuft aus + "; path =/";

Holen Sie sich Cookie -Funktion

Funktion getcookie (Benutzername)
lass name = userername + "=";
lass spli = dokument.Plätzchen.Teilt(';');
für (var j = 0; j < spli.length; j++)
Sei char = spli [j];
während (Char.charat (0) == ")
char = char.Substring (1);

if (Char.indexof (name) == 0)
Return Char.Substring (Name.Länge, Char.Länge);


zurückkehren "";

Um ein einzelnes Cookie zu erhalten.

Überprüfen Sie die Cookie -Funktion

Funktion checkcookie ()
var user = getCookie ("Benutzername");
// Überprüfen Sie, ob der Benutzer null ist oder nicht
if (Benutzer != "")
// Wenn der Benutzer nicht null ist, dann wachsam
ALERT ("WEITER Again" + Benutzer);

// Wenn der Benutzer null ist
anders
// Eingabe vom Benutzer nehmen
user = prompt ("Bitte geben Sie Ihren Namen ein:", "");
// Cookie einstellen
if (Benutzer != "" && Benutzer != null)
setCookie ("Benutzername", Benutzer, 365);



checkcookie ();

Das Check-Cookie prüft einfach, ob der Name existiert oder nicht, ob der Benutzer unsere Website zuerst besucht hat oder nicht. Es überprüft, indem Sie zuerst die GetCookie () -Methode aufrufen, die überprüft, ob der Benutzername existiert oder nicht, und dann, wenn sie existiert Willkommensnachricht mit dem Namen des Benutzers. Wenn der Benutzername nicht vorhanden ist, ruft er die SetCookie () -Methode und den Benutzer auf, dann tritt der Name ein und das Cookie ist festgelegt.

Im Folgenden finden Sie die Screenshots, als ich die Website zum ersten Mal besuchte:

Unten finden Sie den Screenshot, der den Namen zeigt, den ich nach dem Aktualisieren der Seite festgelegt habe:

Abschluss

Ein Cookie ist eine kleine Textdatei, die aus einigen Informationen über einen Benutzer besteht und ein Datenpaket ist, das ein Computer empfängt und dann zurücksendet. Die Browser -Cookies helfen dabei, Benutzerbesuche und Benutzeraktivitäten im Auge zu behalten. Zum Beispiel haben Sie Ihrem Warenkorb einige Elemente hinzugefügt und die Website erkunden und zu einer anderen Seite gegangen oder Sie versehentlich aktualisiert, ohne Cookies würde Ihr Wagen leer werden. Wir haben uns angesehen, wie man Cookies in JavaScript mit Beispielen in diesem Beitrag einstellen, überprüfen und lesen.