Come archiviare più coppie di valore chiave nei biscotti

Biscotti memorizzare informazioni utili relative all'utente che può essere recuperata in seguito. Comprendono piccoli bit di dati conservati in un browser Web per tracciare l'attività dell'utente. Un biscotto può contenerne solo uno "corda"Valore in JavaScript e archiviazione Coppie multiple di valore chiave richiede più biscotti. Tuttavia, l'uso di più cookie può anche causare alcuni problemi. Ad esempio, se a dominio Imposta il biscotto limiti COME "10“, Quindi non puoi archiviare le informazioni dell'11^th utente in un nuovo cookie.

In tali casi, crea un file biscotto singolo e memorizzare più coppie di valore chiave. Questo approccio aiuta a salvare informazioni simili in un cookie e offre diversi vantaggi, come l'applicazione di una data di scadenza a più coppie di valore chiave contemporaneamente.

Questo post discute i metodi per archiviare più coppie di valore chiave nei cookie insieme agli esempi appropriati. Quindi iniziamo!

Come archiviare più coppie di valore chiave in un biscotto

Invece di mantenere più cookie, è molto utile archiviare valori pertinenti per coppie di chiave in un singolo cookie; Ad esempio, piuttosto che creare tre cookie per "Nome e cognome","Classe","Soggetto", Possiamo salvare queste coppie di valore chiave in un singolo cookie per studenti.

Come accennato in precedenza, un biscotto può contenere solo un singolo "valore chiave"Coppia alla volta. Tuttavia, per salvare i valori multipli, è necessario seguire le istruzioni di seguito:

• Creare un costume oggetto.
• Convertilo in una stringa JSON con l'aiuto di "Stringify ()" metodo.
• Conservare il risultato "documento.biscotto"Oggetto.

Ora, controlla il seguente esempio per comprendere il concetto dietro l'uso di un singolo cookie per la memorizzazione di coppie di valori multipli.

Come archiviare i valori in un cookie

Prima di tutto, nel nostro "indice.html"File, tre campi di input,"Nome e cognome","Classe", E "Soggetto,"Vengono aggiunti, che accetteranno l'input dell'utente come rispettivi valori di campo.

Nome e cognome:
Classe:
Soggetto:

Successivamente, aggiungeremo due pulsanti chiamati: "setcookie" E "getcookie". IL "setcookieIl pulsante invoca il "setCookie ()"Funzione per impostare i valori specificati in un cookie, mentre il"getcookiePulsante "Chiama il"getCookie ()"Funzione per recuperare i valori dei cookie:

Dai un'occhiata al nostro "indice.html" file:

Nel nostro "progetto.js"File, definiremo il"setCookie ()"Associato al"al clicEvento "del"setcookie"Pulsanti. IL "setCookie ()"La funzione accederà ai valori dei campi di input utilizzando il"documento.getElementById ()"Metodo e archiviarli tutti insieme in una stringa"StudentInfo". Quindi la stringa "StudentInfo"Il valore verrà assegnato a"documento.biscotto"Oggetto, che si traduce nella creazione di un cookie:

funzione setCookie ()
var studentInfo = "fullname =" + documento.getElementById ("FullName").valore + "; class =" + documento.getElementById ("classe").valore + "; soggetto =" + documento.getElementById ("soggetto").valore;
documento.cookie = StudentInfo;
Avviso ("Cookie è creato");

Definiremo un'altra funzione chiamata "getCookie ()"Nello stesso file. IL "getCookie ()"La funzione controllerà la lunghezza del cookie creato in"Se"Dichiarazione e quindi visualizzare il cookie creato in una scatola di allerta. Nell'altro caso, se il cookie viene scaduto o eliminato, la scatola di allerta lo indicherà "Scusa, il cookie non è disponibile":

funzione getCookie ()
if (documento.biscotto.lunghezza != 0)
Avviso (documento.biscotto);

altro
Alert ("Scusa, il cookie non è disponibile")

Ecco come il nostro "progetto.js"Il file sembra:

Salvemo entrambi i file e quindi utilizzeremo il codice VS "Server live"Estensione per eseguire l'applicazione nel browser:

Immettere i valori in "Nome e cognome","Classe", E "Soggetto"Campi di input e quindi fai clic su"setcookie"Pulsante:

Una scatola di allerta verrà generata a questo punto affermando che A "Il cookie è stato creato":

Ora, fai clic su "getcookie"Pulsante per recuperare le coppie multiple di valore chiave del cookie creato:

Come puoi vedere dall'output che un singolo "valore chiave"La coppia viene visualizzata, che è"Fullname = Sharqa":

Abbiamo provato a archiviare più coppie di valore chiave in un biscotto; comunque, il "getCookie ()"La funzione ha ottenuto solo la coppia di valori di primo tasto. Questo perché i cookie Javascript ti consentono solo di archiviare una singola stringa come un coppia di valore chiave in un biscotto.

In questa situazione, puoi creare un costume JavaScript oggetto, Quindi convertilo in a JSON String e memorizzare il suo valore (coppie più valide) in un biscotto. L'esempio seguente dimostrerà come eseguire questa operazione.

Come archiviare più coppie di valore chiave in un biscotto usando JSON

Spostarsi nel "setCookie ()"Funzione del file JavaScript e crea un oggetto personalizzato chiamato"Oggetto1". IL "Oggetto1"Otterrà i valori dei campi di input aggiunti come proprietà:

funzione setCookie ()
var object1 = ;
Oggetto1.name = document.getElementById ("FullName").valore;
Oggetto1.Class = Documento.getElementById ("classe").valore;
Oggetto1.soggetto = documento.getElementById ("soggetto").valore;

Nel prossimo passaggio, convertiremo "Oggetto1"A a JSON String con l'aiuto di "Stringify ()"Metodo e memorizzare la stringa risultante"documento.biscotto"Oggetto:

var jstrusting = json.stringify (object1);
documento.cookie = jstrusting;
Avviso ("Cookie è creato");

Per recuperare la coppia a valore chiave multiplo memorizzata come una stringa in "documento.biscotto"Oggetto, useremo il"JSON.parse ()" metodo. IL "JSON.parse ()Il metodo "analizzerà il"documento.biscotto" in un Oggetto json. Infine, in una scatola di allerta verranno visualizzate più coppie di valore chiave:

funzione getCookie ()
if (documento.biscotto.lunghezza != 0)
var obj = json.Parse (documento.biscotto);
Avviso ("fullname =" + obj.nome + "" " +" class = " + obj.class + "" + "soggetto =" + obj.soggetto);

altro
avviso ("cookie non disponibile");

Ora, di nuovo apri il "indice.html"Pagina nel browser e immettere i valori nei campi specificati:

Clicking su "setcookieIl pulsante ti farà sapere che viene creato un cookie:

Nel passaggio successivo, fai clic su "getcookie"Pulsante, presente accanto al"setcookie":

La scatola di allerta generata significa che abbiamo memorizzato correttamente più coppie di valore chiave in un singolo cookie:

Puoi anche utilizzare più cookie per lo stesso scopo. Tuttavia, non ti consigliamo di utilizzare questo approccio in quanto rende difficile mantenere più cookie.

Conclusione

Per archiviare più coppie di valore chiave in un cookie, devi creare un Oggetto personalizzato, Convertilo in a JSON String con l'aiuto del "Stringify ()"Metodo e memorizzare il risultato"documento.biscotto"Oggetto. Questo approccio aiuta a salvare informazioni simili in un cookie e offre diversi vantaggi, come l'applicazione di una data di scadenza a più coppie di valore chiave contemporaneamente. Questo articolo ha discusso della procedura per negozio Coppie multiple di valore chiave In Biscotti insieme agli esempi adatti.