Cookie JavaScript

I cookie ti permettono di memorizzare informazioni nel browser web dell'utente.

Cos'è un cookie?

Un cookie è un file di testo piccolo che ti permette di memorizzare una piccola quantità di dati sul computer dell'utente (circa 4KB).

Dopo che il server web ha inviato una pagina al browser, la connessione viene chiusa e il server dimentica tutte le informazioni sull'utente.

I cookie sono stati inventati per risolvere il problema di "come ricordare le informazioni sull'utente".

I cookie possono essere utilizzati per tracciare informazioni, come le preferenze dell'utente, in modo che il sito web possa recuperare queste informazioni per personalizzare le pagine durante la visita successiva dell'utente.

I cookie vengono salvati sotto forma di coppie di "nome=valore", ad esempio:

username = Seagull

Quando il browser richiede una pagina al server, i cookie appartenenti a quella pagina vengono aggiunti alla richiesta. In questo modo, il server riceve i dati necessari per "ricordare" le informazioni sull'utente.

Creazione dei cookie con JavaScript

In JavaScript, è possibile utilizzaredocument.cookieCreazione, lettura e cancellazione delle proprietà dei cookie.

Si può creare un cookie in questo modo:

　　document.cookie = "username=Seagull";

È possibile aggiungere anche la data di scadenza (in unità di tempo UTC). Di default, quando si chiude il browser, vengono cancellati i cookie:

　　document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC";

Utilizzando il parametro path, puoi dire al browser quale percorso appartiene al cookie. Di default, il cookie appartiene alla pagina corrente:

　　document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

Leggi i Cookie utilizzando JavaScript

In JavaScript, puoi leggere i cookie così:

　　var x = document.cookie;

Leggere un cookie è un po' più complesso perché ildocument.cookieL'attributo restituisce una stringa che contiene una lista separata da spazi di punti e virgola di tutti i cookie (ad esempio, name=value; cookie1=value; cookie2=value). Per ottenere un singolo cookie da questa lista, devi usaresplit()Metodo per dividerla in singoli pair name = value e cercare un nome specifico.

Questa stringa non contiene proprietà come expires, path, domain, ecc., potrebbe essere già parte di un set di Cookie.

Modifica Cookie utilizzando JavaScript

Il solo modo per modificare o aggiornare un Cookie è creare uno con lo stesso nome e percorso esistente.

　　document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

Attenzione:Creare un Cookie con lo stesso nome ma con un percorso cookie diverso non cambierà il Cookie esistente, ma aggiungerà un Cookie extra.

Elimina Cookie utilizzando JavaScript

Eliminare un Cookie è molto facile. Elimina Cookie:

• Basta usare nuovamente lo stesso nome per il setting, specificando un valore vuoto.

• O imposta il parametro expires su una data passata.

　　document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Ricorda, se hai specificato path come cookie o altre proprietà, devono essere incluse anche quando li elimini.

Esempio di JavaScript Cookie

Nel seguente esempio, creeremo un cookie che memorizza il nome utente.

Quando l'utente visita la pagina per la prima volta, verrà richiesto di inserire il proprio nome. Quindi, questo nome viene memorizzato nel cookie.

La prossima volta che l'utente visita la stessa pagina, riceverà il valore memorizzato nel cookie.

Per esempio, creeremo 2 funzioni JavaScript:

• Funzione di impostazione del valore del cookie

• Funzione di recupero del valore del cookie

Memorizzare il cookie

Prima di tutto, creiamo una funzione che memorizza il nome dell'visitatore in una variabile cookie.

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth() + 1);
　　var expires = "expires="+ now.toUTCString();
　　document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Spiegazione della funzione:

I parametri della funzione sono il nome del cookie (cname) e il valore del cookie (cvalue).

Questa funzione imposta il cookie aggiungendo il nome del cookie, il valore del cookie e la stringa expires (1 mese) insieme.

Leggi il cookie

Poi, creiamo una funzione che visualizza il valore specifico del cookie.

function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　document.write("Key è: " + cookiePair[0] + " e Value è: " + cookiePair[1]);
　　　　　}
　　}
}

Spiegazione della funzione:

Questa funzione prende il nome del cookie come parametro (cname).

Ottieni tutti i cookie (allcookies = document.cookie).

Dividi document.cookie in un array chiamato cookieArr con il punto e virgola (cookieArr = allcookies.split（';'）).

Esegui una scansione dell'array cookieArr (i = 0; i <cookieArr.length; i ++), e leggi ogni valore (cookiePair = cookieArr [i]).

Se è stato trovato il cookie (cname == cookiePair [0]), scrivi la chiave e il valore del cookie (cookiePair [0], cookiePair [1]).

Raccogliere insieme

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth() + 1);
　　var expires = "expires="+ now.toUTCString();
　　document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　　　　document.write("Key è: " + cookiePair[0] + " e Value è: " + cookiePair[1]);
　　　　　}
　　}
}

Proprietà dei cookie

I cookie sono record di dati testuali puri con 5 proprietà: