Creare, leggere e cancellare un cookie con Javascript

Più volte su queste pagine abbiamo affrontato l’argomento della gestione dei cookie generalmente facendo riferimento a linguaggi di scripting lato server come ad esempio PHP. E’ bene ricordare, invece, che è possibile manipolare i cookie validamente anche attraverso istruzioni lato client. In questa lezione della nostra guida, infatti, ci occuperemo di introdurre il lettore alla possibilità di gestire e manipolare i cookie all’interno di una comune pagina HTML mediante Javascript.

Per chi non lo sapesse (cosa ci fate su Mr.Webmaster?) i cookie sono dei piccoli file di testo che vengono creati sul computer client durante la navigazione di talune pagine web al fine di memorizzare delle informazioni utili all’esperienza di navigazione dell’utente. Mediante i cookie è possibile, ad esempio, memorizzare delle preferenze di navigazione, dei dati di accesso, informazioni sulle pagine visitate, ecc.

I cookie, come appena detto, sono dei banalissimi file di testo il cui contenuto deve seguire una sintassi ben precisa:

nome_cookie=valore_cookie; expires=<em>data di scadenza in formato UTC</em>; path=<em>dominio e percorso in cui è attivo il cookie</em>

Gli elementi costitutivi di un cookie sono, quindi, tre:

• l’accoppiata "nome del cookie" = "valore del cookie";
• la scadenza (facoltativa) in formato UTC;
• il path (facoltativo) dato dal dominio più il percorso;

Se non viene specificata una scadenza il cookie verrà cancellato al termine della sessione di navigazione che lo ha creato. Se non viene specificato il path il browser dovrebbe impostarlo automaticamente per il dominio ed il percorso corrente. Per utilizzare il cookie su tutto il sito generalmente si usa:

path=/

Il linguaggio Javascript, come avrete intuito, è in grado di manipolare i cookie con una certa dimestichezza. Grazie alla proprietà document.cookie, infatti, ci è possibile creare, leggere, modificare e cancellare i cookie attraverso una comune pagina HTML (cioè senza fare ricorso ai linguaggi di scripting lato server). Facciamo un esempio di creazione di cookie:

document.cookie = 'mio_nome=Massimiliano; expires=Tue, 23 June 2009 22:47:11 UTC; path=/'

Con la stringa di codice qui sopra ho creato un semplice cookie chiamato mio_nome con valore Massimiliano; per modificarne il valore sarebbe sufficiente ripetere la medesima operazione assegnando un nuovo valore.

In realtà le operazioni sui cookie con Javascript sono meno intuitive e semplici di quanto lo siano con altri linguaggi; Javascript, infatti, non dispone di funzioni ad hoc per la manipolazione dei cookie… ma dove non arriva il linguaggio, arriva il programmatore! Vediamo quindi come crearci da soli un set di funzioni per la gestione lato-client dei cookie

Creare un cookie

Per creare un cookie è consigliabile avere a portata di mano una funzione ad hoc. Di seguito la funzione che sono solito utilizzare io:

function scriviCookie(nomeCookie,valoreCookie,durataCookie)
{
  var scadenza = new Date();
  var adesso = new Date();
  scadenza.setTime(adesso.getTime() + (parseInt(durataCookie) * 60000));
  document.cookie = nomeCookie + '=' + escape(valoreCookie) + '; expires=' + scadenza.toGMTString() + '; path=/';
}

La nostra funzione richiede tre semplici argomenti:

• il nome del cookie che si desidera creare;
• il valore da assegnare al cookie che si va creando;
• la durata del cookie espressa in minuti (trascorso il tempo indicato il browser cancellerà il cookie in quanto scaduto).

Supponiamo di voler creare un semplice cookie che scada dopo un’ora dalla sua creazione:

scriviCookie('mio_nome','massimiliano',60);

La medesima funzione può essere utilizzata anche per effettuare delle modifiche su un cookie già esistente; per farlo sarà sufficiente ripetere l’operazione inserendo al primo argomento della nostra funzione il nome del cookie che si desidera modificare:

scriviCookie('mio_nome','Luca',60);

Il cookie mio_nome (che avevo già creato in precedenza) orà avrà come valore Luca al posto di Massimiliano.

Leggere i cookie

La lettura di un cookie con Javascript richiede un procedimento piuttosto complesso e davvero poco intuitivo; per questo motivo una funzione ad hoc sembra davvero irrinunciabile. Vediamola:

function leggiCookie(nomeCookie)
{
  if (document.cookie.length > 0)
  {
    var inizio = document.cookie.indexOf(nomeCookie + "=");
    if (inizio != -1)
    {
      inizio = inizio + nomeCookie.length + 1;
      var fine = document.cookie.indexOf(";",inizio);
      if (fine == -1) fine = document.cookie.length;
      return unescape(document.cookie.substring(inizio,fine));
    }else{
       return "";
    }
  }
  return "";
}

La nostra funzione effettua, in sostanza, una serie di passaggi per andare ad individuare il valore assegnato al cookie specificato in argomento. Vediamo un esempio di utilizzo:

var nome = leggiCookie('mio_nome');
document.write('Il tuo nome è: ' + nome);

Nel caso del cookie creato all’esempio precedente l’output sarà:

Il tuo nome è: Luca

Cancellare un cookie

La procedura di cancellazione di un cookie può essere gestita mediante una funzione a ciò preposta che, a sua volta, farà nuovamente ricorso alla fondamentale funzione scriviCookie() vista in precdenza:

function cencellaCookie(nomeCookie)
{
  scriviCookie(nomeCookie,'',-1);
}

In sostanza il cookie viene modificato mediante l’assegnazione di un valore vuoto (nessun valore) ed una scadenza negativa (cookie già scaduto). Per cancellare un cookie utilizzeremo quindi:

cancellaCookie('mio_nome');

Verificare che il browser accetti i cookie

Altra operazione piuttosto frequente negli script che fanno utilizzo dei cookie è la verifica circa l’accettazione o meno degli stessi da parte del browser. Non tutti i browser, infatti, accettano i cookie e, pertanto, è opportuno effettuare delle verifiche preliminari con Javascript prima di lanciare le operazioni sui cookie. Per effettuare una simile verifica, ancora una volta, vi suggerisco di utilizzare una funzione apposita come questa:

function verificaCookie()
{
  document.cookie = 'verifica_cookie';
  var testcookie = (document.cookie.indexOf('verifica_cookie') != -1) ? true : false;
  return testcookie;
}

In sostanza la funzione prova a creare un cookie e subito dopo verifica se il cookie è stato creato o meno. Di seguito un esempio di funzionamento:

var test = verificaCookie();
if (test == true) alert('Il tuo browser accetta i cookie!');
else alert('I biscotti non ti piacciono :-(');

Scaricate l’intero set di funzioni Javascript per la manipolazione dei cookie

Per praticità vi invito a scaricare l’intero set di funzioni che trovate già pronto all’uso all’interno di questa pagina. L’unica cosa che dovete fare è scaricare lo ZIP e decomprimerlo; al suo interno troverete il file cookies.js che dovrete caricare sul vostro spazio web e poi richiamare all’interno di tutte le pagine del vostro sito attraverso le quali desiderate compiere operazioni di manipolazione dei cookie:

<script src="cookies.js"></script>

Una volta linkato il file contenente le funzioni queste saranno liberamente utilizzabili nei modi visti sopra.