Cookies & Javascript

Il cookie ? un pezzo di informazione strettamente legato alla pagina html da cui parte la registrazione o la lettura. Il suo compito principale ? quello di memorizzare informazioni nel computer dell'utente per poterle utilizzare in altre pagine. In questa lezione vedremo tre comandi principali... per salvare, leggere e cancellare i cookie utilizzando i javascript.

In questo articolo vedremo:

• Le caratteristiche del comando document.cookie
• Spiegazione delle tre principali funzioni
• Una serie di esempi

Cookies story
Cookie sono stati originariamente inventati da Netscape per dare memoria ai web server e ai browser. Il protocollo HTTP,  che si occupa del trasferimento delle pagine, ? senza stato, questo significa che una volta che il server ha inviato la pagina all'utente (browser) che ne ha fatto richiesta, non ha ricordi circa la pagina e la visita dell'utente. Cos? se l'utente visita due, tre o quattro volte la pagina, il server ancora lo considera come la prima visita.

Questo pu? essere fastidioso in molti casi, il server non si ricorda se ti sei identificato prima di accedere ad una pagina riservata, oppure non ricorda le tue impostazioni preferite, non ? in grado di ricordare alcunch?.
E nel momento in cui ? iniziata la corsa alla personalizzazione di pagine web e di contenuti, il risolvere il problema della memoria ? diventato sostanziale.

I Cookies sono stati creati a questo scopo. Ci sono attualmente altri metodi per riuscire a risolvere questi problemi, ma i cookie per la loro seplicit?  sono estremamente utili.

Come funzionano i cookie
Un cookie non ? nient'altro che un piccolo file di testo che viene memorizzato nella cache del browser. Per come ? costruito, al suo interno ? conveniente inserire informazioni essenziali non suscettibili di privacy anche se, come vedremo da questo articolo, le informazioni sono comunque protette.

Un Cookie pu? essere scritto e riletto con javascript. ?? il metodo migliore per impostare le preferenze dell'utente quando non si pu? usufruire di un linguaggio lato server (PHP, ASP, JSP, CFM etc).

Prima di continuare tenete conto che i cookie hanno lo scopo di memorizzare informazioni, come le variabili e quindi sono strutturati in maniera equivalente.
I dati necessari in esso contenuti sono name-value:

• nome del cookie
• valore contenuto

Ogni cookie si basa sull'abbinamento name-value al fine di conservare le informazioni indicate. Sono il nome identificativo del cookie ed il contenuto in esso memorizzato.

Sar?  attraverso il nome del cookie che ti sar?  possibile cercare e leggere le informazioni contenute al suo interno.

Gli elementi accessori del cookie sono:

• data di scadenza
• dominio
• percorso

La data di scadenza (data ed ora per la precisione in inglese expires date) definisce la validit?  del cookie. La data deve essere definita nel formato UTC (Greenwich) creato attraverso il metodo Date.toGMTString().

Nota bene: un cookie scaduto ? equivalente ad un cookie assente.
Sia nel caso di cookie assente, sia nel caso di cookie scaduto, il browser non ? in grado di valutarne il contenuto.
Attenzione: se la data di scadenza ? lasciata vuota, il cookie scade appena viene chiusa la finestra del browser.

Dominio & path
Elementi aggiuntivi del cookie sono il dominio ed il percorso. Il dominio indica al browser la provenienza del cookie. Se non specificato direttamente dal codice, viene impostato direttamente come il dominio relativo alla pagina che ne ha richiesto l'impostazione.
Lo scopo di settare il dominio ? quello di avere dei cookie per differenti sottodomini.
Un cookie attivo per il dominio www.yappy.it non pu? essere letto per il dominio news.yappy.it.
Se invece il dominio impostato ? yappy.it,  anche il sottodominio pu? accedere al cookie.

Come per il dominio anche il percorso viene specificato dal server in relazione alla pagina che ne ha fatto richiesta. Il percorso permette di specificare le directory al'interno delle quali il cookie ? attivo.
Generalmente  il percorso ? impostato con "/" in modo da indicare che il cookie ? attivo all'interno di tutto il dominio.

I programmi lato server quindi leggono se l'utente ha diritto ad usare le informazioni contenute nella pagina o de preferisci lo sfondo giallo o verde. Cos? ad ogni visita al sito che ha creato il cookie, le informazioni salvate al suo interno sono nuovamente disponibili.

Non ? possibile impostare un altro dominio...
Non ? possibile impostare un cookie al di fuori del dominio in cui ci si trova in quel momento. Analogamente per la lettura, le informazioni sono raggiungibili unicamente dal sito in esame, ed inoltre hai sempre la possibilit?  di cancellarli dalla cache del tuo browser.

Per scrivere un cookie
Vediamo ora il codice javascript effettivo per impostare un cookie.

   var path="/";   // il cookie ha validit?  in tutto il sito
   var today = new Date();  // data/orario di oggi
   var expires = new Date();  // variabile necessaria a calcolare la scadenza

function SetCooKie(name,value) {
   expires.setTime(today.getTime() + (1000*60*60)); // fra un ora in millisecondi
   avviso=name + "=" + value + "; expires=" + expires.toGMTString() + "; path=" + path;
   document.cookie=avviso; // attivo il cookie
   alert(avviso);  //alert di controllo dei contenuti
}

Per cancellare un cookie
Questa operazione ? simile alla creazione del cookie, ricorda solo che la data di scadenza deve essere precedente a quella attuale, e che il valore in esso contenuto ? vuoto.

function EraseCooKie(name) {
   expires.setTime(today.getTime() - (1000*60*60*24)); // un giorno fa  
   avviso=name + "=; expires=" + expires.toGMTString() + "; path=" + path;
   document.cookie=avviso; // attivo il cookie
   alert(avviso);  //alert di controllo dei contenuti
}

Per leggere il cookie
Questa ? l'operazione pi? complessa si tratta di fare una serie di operazioni necessarie a maneggiare la stringa document.cookie.

function GetCookie(name){ 
   var biscotti = document.cookie.split("; ");  // separo i blocchi di informazioni con il punto e virgola
   for (i=0; i < biscotti.length; i++) {
      briciola = biscotti[i].split("="); // divido l'informazione name dal suo valore
      if (briciola[0] == name) { // cerca il cookie con il nome appena definito
        valore = briciola[1]; // memorizza il codice in una variabile
        alert(valore);  // stampa il valore di controllo
        return valore;   // restituisco il valore in uscita
      }
   }
}

Per testare il funzionamento, nella pagina abbiamo inserito questi pulsanti.

<form>
   <input type="button" value="imposta cookie" onclick="SetCooKie('yappyweb','ok')"><br />
   <input type="button" value="controlla cookie" onclick="GetCookie('yappyweb')"><br />
   <input type="button" value="cancella cookie" onclick="DeleteCookie('yappyweb')"><br />
</form>

Inoltre per testare se il cookie ? rimasto attivo nella precedente visita nella pagina eseguiamo anche il seguente controllo.

<script type="text/javascript">
   if (GetCookie('yappyweb')!=null) alert("hai un cookie attivo dalla tua ultima visita");
</script>

Per ulteriori esempi visitate http://www.quirksmode.org/js/cookies.html

Questo articolo ? indicizzato nelle prime pagine su Google con le parole chiave cookie in javascript.