So speichern Sie mehrere Schlüsselwertpaare in Cookies

Kekse Speichern Sie nützliche Informationen im Zusammenhang mit dem Benutzer, der später abgerufen werden kann. Sie umfassen winzige Daten, die in einem Webbrowser aufbewahrt werden, um die Benutzeraktivität zu verfolgen. Ein Keks kann nur einen enthalten “SaiteWert in JavaScript und Speichern Mehrere Schlüsselwertpaare erfordert Mehrere Kekse. Die Verwendung mehrerer Cookies kann jedoch auch einige Probleme verursachen. Zum Beispiel wenn a Domain setzt den Keks Grenzen als "10„Dann können Sie die Informationen der 11 nicht speichern^th Benutzer in einem neuen Cookie.

In solchen Fällen erstellen Sie a Single Cookie und speichern Sie mehrere Schlüsselwertpaare. Dieser Ansatz hilft dabei, ähnliche Informationen in einem Cookie zu sparen und bietet mehrere Vorteile, z. B. die Anwendung eines Ablaufdatums auf mehrere Schlüsselwertpaare gleichzeitig.

In diesem Beitrag werden die Methoden zum Speichern mehrerer Schlüsselwertpaare in Cookies zusammen mit den entsprechenden Beispielen erörtert. So lass uns anfangen!

So speichern Sie mehrere Schlüsselwertpaare in einem Keks

Ist es anstatt mehrere Cookies aufrechtzuerhalten, ist es sehr vorteilhaft, relevante Schlüsselpaarwerte in einem einzelnen Cookie zu speichern? Zum Beispiel anstatt drei Cookies für zu erstellen “Vollständiger Name","Klasse","Thema”, Wir können diese Schlüsselwertepaare in einem einzigen Student Cookie speichern.

Wie bereits erwähnt, kann ein Keks nur eine Single halten “Schlüsselwert”Paar gleichzeitig. Um jedoch mehrere Key-Werte zu speichern, müssen Sie jedoch den folgenden Anweisungen befolgen:

• Ein ... kreieren Brauch Objekt.
• Konvertieren Sie es mit Hilfe des “in eine JSON -String“Stringify ()" Methode.
• Das Ergebnis speichern “dokumentieren.Plätzchen" Objekt.

Schauen Sie sich nun das folgende Beispiel an, um das Konzept hinter einem einzigen Cookie zu verstehen, um Mehrfachwertpaare zu speichern.

So speichern Sie Werte in einem Keks

Zuallererst in unserem ““Index.html"Datei, drei Eingabefelder"Vollständiger Name","Klasse", Und "Thema,”Werden hinzugefügt, wodurch die Benutzereingabe als die jeweiligen Feldwerte akzeptiert werden.

Vollständiger Name:
Klasse:
Thema:

Als nächstes werden wir zwei Tasten mit dem Namen: “hinzufügen:“setcookie" Und "Getcookie”. Der "setcookie"Die Taste ruft die" auf "setcookie ()”Funktion zum Einstellen der angegebenen Werte in einem Cookie, während die“ die “GetcookieSchaltfläche Rufen Sie die “an"Getcookie ()Funktionieren Sie die Cookie -Werte:

Schauen Sie sich unsere an “Index.html" Datei:

In unserer "Projekt.JS"Datei, wir werden die" definieren "setcookie ()" in Verbindung mit "ONCLICK"Ereignis der"setcookie" Tasten. Der "setcookie ()Die Funktion wird auf die Werte der Eingabefelder zugreifen, indem sie die “verwendendokumentieren.GetElementById ()"Methode und speichern Sie sie alle zusammen in einer Zeichenfolge"studentInfo”. Dann die Zeichenfolge “studentInfo"Wert wird zugewiesen"dokumentieren.PlätzchenObjekt, das zum Erstellen eines Cookies führt:

Funktion setcookie ()
var studentInfo = "fullname =" + Dokument.GetElementById ("Fullname").Wert + "; class =" + Dokument.GetElementById ("Klasse").Wert + "; Subjekt =" + Dokument.GetElementById ("Subjekt").Wert;
dokumentieren.Cookie = StudentInfo;
Alert ("Cookie wird erstellt");

Wir werden eine andere Funktion namens definieren “Getcookie ()”In derselben Datei. Der "Getcookie ()Die Funktion überprüft die Länge des erstellten Cookie in der “Wenn”Anweisung und dann das erstellte Cookie in einer Warnbox anzeigen. Wenn der Cookie abgelaufen oder gelöscht wird, heißt es in der Alarmbox, dass “, dass“Entschuldigung, ist Cookie nicht verfügbar”:

Funktion getcookie ()
if (Dokument.Plätzchen.Länge != 0)
Alarm (Dokument.Plätzchen);

anders
alarm ("Entschuldigung, ist Cookie nicht verfügbar")

So ist unsere ““Projekt.JS”Datei sieht aus:

Wir speichern beide Dateien und verwenden dann den VS -Code “Live -ServerErweiterung zum Ausführen der Anwendung im Browser:

Geben Sie Werte in die “einVollständiger Name","Klasse", Und "ThemaEingabefelder und klicken Sie dann auf die “setcookie" Taste:

Zu diesem Zeitpunkt wird eine Warnbox generiert, in der ein "ein"Cookie wird erstellt”:

Klicken Sie nun auf die “GetcookieTaste, um die mehrfachen Schlüsselwertpaare des erstellten Cookie abzurufen:

Wie Sie aus der Ausgabe sehen können, dass eine einzelne “Schlüsselwert"Paar wird angezeigt", nämlich "FullName = Sharqa”:

Wir haben versucht, mehrere Schlüsselwertpaare in einem Keks zu speichern. Allerdings das “Getcookie ()Die Funktion hat nur das Wert des ersten Schlägers abgerufen. Dies liegt daran, dass JavaScript Cookies es Ihnen nur erlauben, zu speichern eine einzelne Zeichenfolge Als ein Schlüsselwertpaar in einem Keks.

In dieser Situation können Sie eine erstellen Brauch JavaScript Objekt, Dann konvertieren Sie es in a Json String und speichern Sie seinen Wert (mehrere Schlüsselwertpaare) in einem Keks. Das unterbezogene Beispiel zeigt, wie diese Operation durchgeführt wird.

So speichern Sie mehrere Schlüsselwertpaare in einem Cookie mit JSON

Bewegen in die “setcookie ()Funktion der JavaScript -Datei und erstellen Sie ein benanntes benanntes Objekt “Objekt1”. Der "Objekt1”Erhält die Werte der hinzugefügten Eingangsfelder als Eigenschaften:

Funktion setcookie ()
var Object1 = ;
Objekt1.Name = Dokument.GetElementById ("Fullname").Wert;
Objekt1.Klasse = Dokument.GetElementById ("Klasse").Wert;
Objekt1.Betreff = Dokument.GetElementById ("Subjekt").Wert;

Im nächsten Schritt werden wir konvertieren “Objekt1" zu einem Json String mit der Hilfe von "Stringify ()"Methode und speichern Sie die resultierende Zeichenfolge"dokumentieren.Plätzchen" Objekt:

var jkonstring = json.Stringify (Object1);
dokumentieren.Cookie = jSonstring;
Alert ("Cookie wird erstellt");

Um das mehrfacher Schlüsselwertpaar abzurufen, das als Zeichenfolge in der “gespeichert ist“dokumentieren.Plätzchen"Objekt, wir werden die" verwenden "JSON.analysieren ()" Methode. Der "JSON.analysieren ()"Methode wird die" analysieren "dokumentieren.Plätzchen" in ein JSON -Objekt. Zuletzt werden mehrere Schlüsselwertpaare in einem Warnungsfeld angezeigt:

Funktion getcookie ()
if (Dokument.Plätzchen.Länge != 0)
var obj = json.analysieren (Dokument.Plätzchen);
alert ("fullname =" + obj.Name + "" + "class =" + obj.Klasse + "" + "Subjekt =" + obj.Thema);

anders
alarm ("Cookie nicht verfügbar");

Jetzt öffne wieder das "Index.htmlSeite im Browser und geben Sie Werte in die angegebenen Felder ein:

Klicken Sie auf die “setcookieButton wird Sie wissen, dass ein Cookie erstellt wird:

Klicken Sie im nächsten Schritt auf die “GetcookieSchaltfläche, die neben der “vorhanden istsetcookie”:

Das generierte Alarmbox bedeutet, dass wir mehrere Schlüsselwertpaare in einem einzigen Cookie erfolgreich gespeichert haben:

Sie können auch mehrere Cookies für denselben Zweck verwenden. Wir empfehlen jedoch nicht, diesen Ansatz zu verwenden, da es schwierig ist, mehrere Cookies zu pflegen.

Abschluss

Um mehrere Schlüsselwertpaare in einem Cookie zu speichern, müssen Sie a erstellen benutzerdefiniertes Objekt, konvertieren es in a Json String mit Hilfe der “Stringify ()"Methode und speichern Sie das Ergebnis"dokumentieren.Plätzchen" Objekt. Dieser Ansatz hilft dabei, ähnliche Informationen in einem Cookie zu sparen, und bietet mehrere Vorteile, z. B. die Anwendung eines Ablaufdatums auf mehrere Schlüsselwertpaare gleichzeitig. In diesem Artikel wurde das Verfahren erörtert speichern Mehrere Schlüsselwertpaare In Kekse zusammen mit den geeigneten Beispielen.