Come impostare, controllare e leggere un valore cookie con JavaScript?
Parleremo di come impostare, controllare e leggere un valore dei cookie con JavaScript in questo articolo. Tuttavia, prima di andare ulteriormente lasciami sottolineare sul punto che i cookie non dovrebbero essere utilizzati per memorizzare informazioni critiche/sensibili come password o dettagli della tua carta di credito poiché le persone dannose potrebbero accedervi.
Creare un cookie
IL documento.biscotto La proprietà crea, legge ed elimina i cookie e questa è la proprietà, che rappresenta tutti i cookie collegati a un documento. Per creare un cookie prima dovremmo sapere che i cookie vengono salvati in coppie di valore di nome, ad esempio:
nome utente = obama;Creiamo ora un cookie in JavaScript:
documento.cookie = "nome utente = obama";La vita di un cookie è impostato sulla durata della sessione del browser corrente, il che significa che scade quando l'utente chiude il browser. Per risolvere questo problema utilizziamo il Max-Age attributo che garantisce che il cookie persista oltre l'attuale sessione del browser. Nell'attributo massimo, possiamo specificare la durata di un cookie in pochi secondi I-e per quanto tempo rimarrà il cookie prima che venga eliminato. La durata della vita del cookie nel codice seguente è di 30 giorni:
documento.cookie = "nome utente = obama; max-age =" + 30*24*60*60;Possiamo anche usare il scadere attributo che richiede la data esatta anziché secondi nel formato GMT/UTC e in quella data scade il cookie:
documento.cookie = "nome utente = obama; scade = thu, 26 settembre 2021 12:00:00 UTC";Un altro attributo che possiamo usare nella creazione di cookie è il sentiero attributo che dice al browser a quale percorso appartiene il cookie anziché il percorso predefinito che è la pagina corrente.
documento.cookie = "nome utente = obama; scade = thu, 26 settembre 2021 12:00:00 UTC; percorso =/";Dobbiamo usare il javascript encodeUricomponent () Poiché il valore dei cookie contiene virgole, punti e virgole e spazi e il ENCODEURICompAnet () assicura che la stringa non contenga virgole, punti e virgole e spazi in quanto non sono consentiti nei biscotti.
documento.cookie = "username =" + encodeuricomponent ("obama");Leggere il biscotto
Possiamo leggere o ottenere tutti i cookie di un dominio corrente utilizzando il documento.Cookie:
var x = documento.biscotto;Proprio come nel creare un cookie che abbiamo usato encodeUricomponent () Nel leggere un biscotto dobbiamo usare decodeuricomponenet ():
documento.cookie = "username =" + decodeuricomponent ("obama");Eliminazione di biscotti
Possiamo anche eliminare un cookie e in JavaScript, il processo è molto semplice in quanto non dobbiamo specificare un valore di cookie piuttosto che possiamo usare il parametro scadente e aggiornarlo utilizzando una data passata, ad esempio:
documento.cookie = "nome utente = obama; scade = thu, 20 nov 2018 12:00:00 UTC; percorso =/";
Eliminazione di biscotti
Possiamo anche eliminare un cookie e in JavaScript, il processo è molto semplice in quanto non dobbiamo specificare un valore di cookie piuttosto che possiamo usare il parametro scadente e aggiornarlo utilizzando una data passata, ad esempio:
documento.cookie = "nome utente = obama; scade = thu, 20 nov 2018 12:00:00 UTC; percorso =/";Esempio di cookie in JavaScript
Ora che sappiamo cos'è un cookie, come creare o leggere un cookie, combiniamo tutto ciò che abbiamo imparato e creiamo un cookie che memorizza un nome ogni volta che un utente visita il nostro sito Web. Prenderemo un nome input dall'utente quando l'utente inserisce il nostro sito Web per la prima volta e lo memorizzeremo in un cookie. Quando l'utente entra di nuovo nel sito Web, riceverà un messaggio di benvenuto sul sito Web.
Per implementare l'esempio di cui sopra, avremo bisogno di 3 funzioni in cui una delle funzioni imposterà un cookie, si leggerà/riceverà un valore del cookie e l'ultima funzione controllerà il valore dei cookie.
Imposta la funzione dei cookie
funzione setCookie (nome utente, valore, scadenza)const data = new Date ();
data.SetTime (data.gettime () + (scadenza * 24 * 60 * 60 * 1000));
var scarse = "scade ="+data.toutcstring ();
documento.cookie = nome utente + "=" + valore + ";" + scade + "; percorso =/";
Ottieni la funzione dei cookie
funzione getCookie (nome utente)let name = nome utente + "=";
Let spli = document.biscotto.diviso(';');
per (var j = 0; j < spli.length; j++)
let char = spli [j];
mentre (char.charat (0) == ")
char = char.substring (1);
if (char.INDICEF (nome) == 0)
Restituisce Carma.sottostringa (nome.Lunghezza, char.lunghezza);
ritorno "";
Per ottenere un singolo cookie abbiamo usato il metodo diviso che scomponderà le coppie di valori name = e quindi cerchiamo il nome che vogliamo.
Controlla la funzione dei cookie
funzione checkCookie ()var user = getCookie ("nome utente");
// controlla se l'utente è nullo o no
if (utente != "")
// Se l'utente non è nullo, allora avviso
avviso ("benvenuto di nuovo" + utente);
// Se l'utente è nullo
altro
// Prendi input dall'utente
User = prompt ("Inserisci il tuo nome:", "");
// Imposta cookie
if (utente != "" && utente != null)
setCookie ("nome utente", utente, 365);
CheckCookie ();
Il cookie di controllo controlla semplicemente se il nome esiste o no se l'utente ha visitato per la prima volta il nostro sito o meno. Controlla prima chiamando il metodo getCookie () che controlla se il nome utente esiste o meno e poi se esiste mostra il messaggio di benvenuto con il nome dell'utente. Se il nome utente non esiste, chiama il metodo setCookie () e l'utente inserisce il nome e il cookie è impostato.
Di seguito sono riportati gli screenshot di quando ho visitato per la prima volta il sito:
Di seguito è riportato lo screenshot che mostra il nome che ho impostato dopo aver rinfrescato la pagina:
Conclusione
Un cookie è un piccolo file di testo composto da alcune informazioni su un utente ed è un pacchetto di dati che un computer riceve e quindi invia indietro senza modificarlo o modificarlo. I cookie del browser aiutano a tenere traccia delle visite dell'utente e delle attività dell'utente. Ad esempio, hai aggiunto alcuni elementi al tuo carrello e stai esplorando il sito e sei andato a un'altra pagina o lo aggiorni accidentalmente, senza biscotti il tuo carrello diventerebbe vuoto. Abbiamo esaminato come impostare, controllare e leggere i cookie in JavaScript con esempi in questo post.