JavaScript e Cookies

Ciao a tutti, futuri maghi di JavaScript! Oggi ci imbarcheremo in un delizioso viaggio nel mondo dei cookies. No, non quelli che tuffi nel latte (benché non disdegnerei uno proprio ora), ma il tipo digitale che rende le nostre esperienze web più fluide e personalizzate. Allora, indossate il vostro grembiule virtuale e iniziamo a cuocere... voglio dire, programmare!

Cos'è un Cookie?

I cookies sono piccoli pezzi di dati memorizzati sul computer di un utente dai siti web che visita. Pensate a loro come a piccoli post-it digitali che i siti web attaccano sul vostro computer per ricordare cose su di voi. Questi "post-it" possono contenere diverse informazioni, come le vostre preferenze, i dettagli di login o gli articoli nel carrello della spesa.

Quando ho imparato per la prima volta cosa sono i cookies, ho immaginato piccoli folletti del computer che scrivevano note e le infilavano nel mio PC. Anche se non è esattamente così che funziona, è un modo non male per visualizzare il concetto!

Perché i Cookies sono necessari?

Forse vi state chiedendo: "Perché i siti web non possono ricordare le cose senza queste cose chiamate cookies?" Beh, lasciatemi raccontare una piccola storia.

Immaginate di essere in un caffè affollato. Ordinate un caffè e un panino, ma poi dovete andare in bagno. Quando tornate, come fa il barista a sapere quale ordine è il vostro tra tutti i clienti? Ecco dove entrano in gioco i cookies nel mondo digitale.

I cookies sono necessari per diversi motivi:

1. Ricordare le preferenze degli utenti
2. Mantenere gli utenti logged in
3. Tracciare gli articoli nel carrello della spesa
4. Personalizzare l'esperienza degli utenti
5. Analizzare il comportamento degli utenti per migliorare

Senza cookies, ogni volta che visitate un sito web, sarebbe come incontrarlo per la prima volta - nessuna memoria delle vostre preferenze, nessun login salvato, nessun articolo nel carrello. Non molto conveniente, vero?

Come Funziona?

Ora, diamo un'occhiata sotto il cofano e vediamo come funzionano questi cookies digitali. Non preoccupatevi; non è così complicato come potrebbe sembrare!

Quando visitate un sito web, esso può inviare un cookie al vostro browser. Il browser poi memorizza questo cookie sul vostro computer. La prossima volta che visitate lo stesso sito, il browser invia il cookie indietro al sito. È come un segno segreto tra il vostro computer e il sito.

Ecco una semplice diagramma di come funziona:

Utente visita il sito
↓
Sito invia cookie
↓
Browser memorizza cookie
↓
Utente rilegge il sito
↓
Browser invia cookie
↓
Sito riconosce l'utente

Ora che abbiamo capito le basi, mettiamo le maniche su e iniziamo a lavorare con i cookies in JavaScript!

Impostare/ Memorizzare Cookies

Impostare un cookie è come lasciare una nota per dopo. In JavaScript, utilizziamo la proprietà document.cookie per creare un cookie. Ecco come fate:

document.cookie = "username=John Doe";

Analizziamo questo:

• document.cookie è la proprietà che utilizziamo per interagire con i cookies.
• "username=John Doe" è il cookie effettivo. È una coppia chiave-valore, dove username è la chiave e John Doe è il valore.

Potete anche impostare più cookies:

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

Ogni dichiarazione document.cookie crea un nuovo cookie. Non sovrascrive quelli esistenti.

Leggere Cookies

Leggere i cookies è come sfogliare le note che avete lasciate per voi stessi. Ecco come leggete i cookies:

let allCookies = document.cookie;
console.log(allCookies);

Questo vi darà tutti i cookies come una lunga stringa. Ma di solito, volete ottenere il valore di un cookie specifico. Ecco una funzione per farlo:

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// Uso
let username = getCookie("username");
console.log(username); // Output: John Doe

Questa funzione divide la stringa dei cookies, loopa attraverso ciascun cookie e restituisce il valore se trova una corrispondenza.

Impostare la Data di Scadenza dei Cookies

I cookies sono come il latte - possono andare a male se lasciati fuori troppo a lungo. Per impostazione predefinita, i cookies scadono alla fine della sessione del browser. Ma potete impostare una data di scadenza specifica:

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

Questo cookie scadrà in un mese. L'attributo expires dice al browser quando cancellare il cookie.

Eliminare un Cookie

A volte, devi buttare via un cookie. Per eliminare un cookie, imposti la sua data di scadenza a una data passata:

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

Questo imposta il valore del cookie a vuoto e la sua data di scadenza a una data nel passato, eliminandolo effettivamente.

Aggiornare i Cookies

Aggiornare un cookie è semplice come impostarlo di nuovo con un nuovo valore:

document.cookie = "username=Jane Doe";

Se esiste già un cookie con il nome "username", questo aggiornerà il suo valore. Se non esiste, creerà un nuovo cookie.

Tabella dei Metodi per i Cookies

Ecco una comoda tabella che riassume i metodi che abbiamo imparato:

Azione	Metodo
Impostare Cookie	document.cookie = "key=value";
Leggere Tutti i Cookies	let allCookies = document.cookie;
Leggere Cookie Specifico	Utilizzare la funzione getCookie()
Impostare Scadenza	document.cookie = "key=value; expires=date";
Eliminare Cookie	Impostare scadenza a data passata
Aggiornare Cookie	Impostare cookie di nuovo con nuovo valore

E voilà, ragazzi! Ora siete equipaggiati con le conoscenze per lavorare con i cookies in JavaScript. Ricordate, con grande potere viene grande responsabilità. Rispettate sempre la privacy degli utenti e siate trasparenti riguardo all'uso dei cookies.

La prossima volta che navigate e un sito ricorda le vostre preferenze, potrete sorridere sognando e pensare, "Ah, i cookies al lavoro!" Buon codice e possa i vostri cookies digitali sempre essere freschi e i vostri cookies reali sempre deliziosi!

Credits: Image by storyset