Introduzione ai cookie: comprendere e lavorare con i cookie JavaScript

Preslav Dobrev2022-10-25 · 8 min read

Introduzione ai cookie: comprendere e lavorare con i cookie JavaScript

I cookie del browser, o cookie HTTP, sono file di testo composti da piccoli frammenti di dati. I siti web utilizzano queste informazioni per tracciare il percorso dell’utente, consentendo loro di offrire funzionalità su misura e migliorare la loro esperienza di navigazione. I cookie possono memorizzare fino a 4096 byte di dati. Tuttavia, possiamo aggiungere un numero limitato di cookie per dominio, a seconda del browser.

Una comprensione di base dei cookie HTTP è essenziale per qualsiasi utente di Internet, sia che si navighi solo per divertimento o che ci si guadagni da vivere. Questa guida vi introdurrà ai cookie e ai loro vari tipi in dettaglio. Il nostro obiettivo è aiutarvi a comprendere e lavorare con i cookie JavaScript.

Iniziamo!

Prerequisiti

Per seguire questo tutorial, è necessario avere:

Una basilare comprensione di JavaScript.

Guida introduttiva ai cookie JavaScript

Lavorare con i cookie JavaScript è semplice. Consente di creare, modificare e recuperare i cookie senza sforzo. Inoltre, possiamo utilizzare la proprietà cookie dell’oggetto Document per manipolare e limitare le proprietà dei cookie come nome, valore e lunghezza, solo per citarne alcune.

Tipi di cookie

Innanzitutto, diamo un'occhiata ai diversi tipi di cookie:

Cookie di prima parte

Questi cookie vengono creati e memorizzati ogni volta che un utente visita un sito web. Consentono ai proprietari dei siti web di ottenere informazioni dettagliate sui dati degli utenti e di offrire loro una migliore esperienza di navigazione.

Cookie persistenti

Per questo tipo di cookie, l'emittente assegna una data di scadenza. Pertanto, viene utilizzato per un periodo di tempo molto più lungo. Ciò significa che anche se si chiude il browser, il cookie rimarrà su di esso. Inoltre, i dati vengono restituiti all'emittente ogni volta che si visita il sito web che ha creato il cookie.

Cookie di sessione

Questi cookie sono solo temporanei e verranno memorizzati nella memoria del browser mentre è aperto. Quando lo si chiude, il cookie viene rimosso dalla cronologia del browser, riducendo il rischio per la sicurezza. Non è necessario specificare una data di scadenza.

Cookie di terze parti

I cookie di terze parti vengono creati da un sito che non si sta visitando in quel momento. Per lo più, questi cookie sono utili per tracciare un utente che ha fatto clic su un annuncio pubblicitario, associandolo al dominio di provenienza.

Creazione dei cookie

Possiamo creare i cookie utilizzando due metodi:

Inviare Set-Cookie nell'intestazione di risposta HTTP. A seconda delle tecnologie utilizzate per il server web, è possibile gestire le intestazioni dei cookie utilizzando strumenti e librerie. I cookie possono contenere informazioni come una data di scadenza e caratteristiche di sicurezza come la direttiva secure e il HttpOnly flag.

HttpOnly: Indica che il browser non può leggere o modificare i cookie.
Secure: Indica che il cookie può essere inviato solo tramite HTTPS.

Utilizzando la proprietà document.cookie di JavaScript, possiamo creare, leggere ed eliminare i cookie.

Passo 1 — Creazione di un cookie

Successivamente, mostreremo il processo di creazione di un cookie JavaScript. I cookie vengono salvati nel formato coppia nome-valore:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Nel cookie sopra indicato, UserName è il nome del cookie mentre CloudSigma è il valore memorizzato in esso.

Il cookie ha una data di scadenza. Per impostazione predefinita, viene eliminato automaticamente alla chiusura del browser. È anche possibile aggiungere una data di scadenza al cookie:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Per impostazione predefinita, i cookie appartengono alla pagina corrente. Tuttavia, possiamo anche specificare il cookie con l'aiuto del parametro path :

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

A seconda delle vostre esigenze, potete utilizzare queste due strategie per impostare la data di scadenza di un cookie. La differenza tra le due è che expires imposta una data di scadenza in cui un cookie viene eliminato. Al contrario, il parametro max-Age imposta il tempo in secondi in cui un cookie verrà eliminato. Sfortunatamente, max-age non è supportato da tutti i browser.

Esempio di impostazione di un cookie utilizzando expires e max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // in millisecondi
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // in millisecondi

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Lettura di un Cookie

L'attributo document.cookie restituisce una stringa. Se ci sono due o più cookie, usiamo un punto e virgola ( ;) e uno spazio per separarli.

Usiamo il metodo split() per estrarre un singolo cookie da un elenco di cookie. Questo metodo scompone l'elenco in singole coppie di nomi e valori. Una volta fatto, puoi quindi cercare il cookie di destinazione che desideri leggere:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Benvenuto di nuovo, " + UserName);
} else {
    firstName = prompt("Inserisci il tuo UserName:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Benvenuto di nuovo, " + UserName);

} else {

firstName = prompt("Inserisci il tuo UserName:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Cerchiamo di capire le funzioni che abbiamo creato nel codice:

Nome della funzione	Descrizione
setCookie()	Crea un cookie
getCookie()	Legge il valore del cookie
checkCookie()	Verifica se il UserName è impostato o meno.

Nel prossimo passo, impareremo come aggiornare un cookie.

Step 3 — Aggiornamento di un Cookie

Possiamo impostare nuovi valori per gli attributi del nostro cookie. Nel nostro esempio, aggiorniamo l'abbonamento dell'utente dal piano mensile al piano trimestrale.

Aggiorniamo l'attributo max-age del cookie UserName da 30 giorni a 180 giorni:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Step 4 — Eliminazione di un Cookie

Rinominare il cookie con lo stesso nome eliminerà il cookie che si desidera cancellare. Possiamo eliminare un cookie impostando l'attributo max-age a 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Inoltre, se il cookie ha un percorso specificato, eliminalo specificandolo:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Conclusione

I cookie sono necessari affinché un sito web funzioni correttamente. In questo tutorial introduttivo, abbiamo discusso in dettaglio i cookie e le loro diverse tipologie. Inoltre, abbiamo imparato a lavorare con i cookie con l'aiuto di un esempio. Ora che ti senti a tuo agio nell'usare i cookie di JavaScript, inizia a creare cookie personalizzati per imparare ed esplorare di più sull'argomento.

Inoltre, ci sono molti tutorial su JavaScript e sullo sviluppo web che puoi esplorare dal nostro blog:

Buona programmazione!

Preslav Dobrev

Autore · CloudSigma

Preslav Dobrev è un designer creativo presso CloudSigma, con un focus su un'identità aziendale coerente attraverso l'uso di canali di marketing tradizionali e innovativi. È abile nel fondere la visione artistica con il marketing strategico per creare narrazioni di brand di grande impatto.