Gestire i cookie con jQuery

La gestione dei cookie non è possibile solo attraverso linguaggi lato server ma anche utilizzando Javascript. In questo articolo vedremo come gestire in maniera molto semplice i cookie utilizzando jQuery e un suo plugin disponibile a questo indirizzo: jQuery Cookie.

Una volta importato il plugin, la gestione dei famosi biscottini è davvero molto semplice.

Le operazioni possibili su un cookie sono principalmente tre:

• creazione
• lettura
• cancellazione

Creazione di un cookie

La creazione può essere di due tipi, con o senza scadenza prefissata. Nel primo caso il cookie verrà cancellato alla chiusura del browser; nel secondo scadrà in base alle nostre esigenze.

Vediamo, nel primo esempio, come creare un cookie che verrà eliminato nel momento in cui si chiuderà il browser.

view source print?

1 $.cookie("prova","cookie di prova");

Come possiamo notare, il primo parametro indica il nome del cookie, il secondo ne indica il contenuto. Se vogliamo dare una scadenza al cookie, possiamo modificare la funzione in questa maniera:

view source print?

1 $.cookie("prova","cookie di prova", { expires: 10 });

L’unica differenza con il codice precedente è il paramentro expires che indica la scadenza in giorni.

Leggere il contenuto di un cookie

Anche la lettura è un’operazione molto semplice. Il seguente codice inserisce all’interno della pagina il contenuto del cookie precedentemente creato.

view source print?

1 var cookie = $.cookie("prova");

2 $('body').append("<p>" + cookie + "</p>");

Eliminare un cookie

Per eliminare il cookie è sufficiente richiamarlo dandogli come contenuto il valore null come nel seguente codice:

view source print?

1 $.cookie("prova", null);

Un esempio pratico

Vediamo ora un semplicissimo esempio pratico della gestione dei cookie. Creiamo una piccola pagina che, se presente il cookie utente, visualizza il nome dell’utente, altrimenti mostra un messaggio generico. Inseriamo al suo interno la possibilità di creare ed eliminare tale cookie.

Una piccola nota prima di procedere. L’esempio non contiene nessun tipo di controlli, inclusi quelli dei contenuti immessi tramite la form quindi potenzialmente pericoloso. In un caso reale è ovvio prestare molta attenzione.

Innanzitutto creiamo la parte html, molto semplice:

view source print?

1 <h1 id="welcome">Benvenuto visitatore</h1>

2 <form id="cookies" action="#">

3  <p>Inserisci il tuo nome: <input type="text" id="name" /><input type="submit" id="submit" /></p>

4 </form>

5  

6 <p><a id="delete" href="#">Delete Cookie</a></p>

Il messaggio contenuto nel tag <h1> verrà sostituito da Javascript se presente il cookie. Passiamo ora a jQuery, per prima cosa verifichiamo che esista il cookie e, in caso positivo, visualizziamo il nome dell’utente:

view source print?

1 if( $.cookie('utente') != null )

2  $('body h1').html('Benvenuto ' + $.cookie('utente'));

Ora possiamo gestire la form per inserire il cookie con il nome dell’utente:

view source print?

1 $('#cookies').submit(function(){

2  var name = $('#name').val();

3  $.cookie('utente', name);

4  

5  location.reload();

6 });

e la cancellazione del cookie:

view source print?

1 $('#delete').click(function(){

2  $.cookie('utente', null);

3  

4  location.reload();

5 });

Potete vedere una demo online oppure scaricare l’esempio ai seguenti link:

Live Demo Download