Creare, modificare e gestire i cookies con javascript

I cookies (letteralmente “biscotti”) possono essere creati, modificati e gestiti anche con un puro javascript. Con funzioni prefatte, il sistema è semplice (1)

Se usate linguaggi di programmazione lato server, come php o asp, la gestione dei cookies è abbastanza semplice, perché esistono già delle funzioni predisposte. Può capitare, però, che dobbiate creare o modificare i cookies agendo esclusivamente tramite javascript, per esempio al verificarsi di un evento in JQuery.

La gestione dei cookies tramite javascript non è complicata, anche se la comprensione della funzione di lettura (per i neofiti) non è propriamente a portata di mano.

Scrittura e controllo del cookies

Il codice seguente non ha bisogno di ritocchi. Il suo scopo è di leggere il cookie con il “nome” passato come parametro.
Dopodiché controlla la sua esistenza (guardando se la sua lunghezza è >0). Alla fine, recupera il valore contenuto nel cookie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//controlla l'esistenza del cookie con il nome passato
function check(nome){
	if (document.cookie.length > 0){
		var first = document.cookie.indexOf(nome + "=");
		if (first != -1){
			first = first + nome.length + 1;
			var end = document.cookie.indexOf(";",first);
			if (end == -1) end = document.cookie.length;
			return unescape(document.cookie.substring(first,end));
		}else{
			return "";
		}
	}
	return "";
}

Ed ecco di seguito la funzione di creazione del cookies, che sarà utilizzata anche per modificare i suoi valori.
Come potete notare, il terzo parametro è quello della scadenza del cookie e rappresenta la durata in minuti. La scadenza è facoltativa: nel caso non sia stabilita, il cookie sarà cancellato al termine della sessione.
Anche il path non è obbligatorio: se non è settato, si prende in automatico il percorso corrente; con “path=/” lo si imposta per tutto il sito.

1
2
3
4
5
6
7

//crea un cookie (o lo modifica, se già esistente) con il valore e la durata passati
function scrivi(nome,valore,durata){
	var scadenza = new Date();
	var attuale = new Date();
	scadenza.setTime(attuale.getTime() + (parseInt(durata) * 60000));
	document.cookie = nome + '=' + escape(valore) + '; expires=' + scadenza.toGMTString() + '; path=/';
}

Esempio di uso

Facciamo un esempio di utilizzo.
Nel codice seguente non faccio altro che controllare l’esistenza del cookie. In caso esista, viene ritornato il suo valore, che è immagazzinato nella variabile “nome_cookies” (la funzione di alert è utile solo nell’esempio, per stampare il valore a video, e può essere commentata).
I commenti spiegano già come il valore del cookie venga cambiato:
– se non esiste, viene creato con valore “on”
– se esiste e il suo valore è “on”, cambia il valore in “off”
– se esiste e il suo valore è “off”, cambia il valore in “on”

1
2
3
4
5
6
7
8

//controlla l'esistenza del cookie "toppage"
//se è settato a off o non esiste, lo setta a on; altrimenti lo setta a off
var nome_cookies=check('toppage');
alert('nome_cookies');
if(nome_cookies=="off" || nome_cookies=="")
	scrivi('toppage','on',180);
else
	scrivi('toppage','off',180);

Cancellare un cookie

Come in qualsiasi altro linguaggio, un cookie viene cancellato impostando a “null” la sua durata. Nel caso del javascript, il valore da impostare è “-1”.

1
2
3
4

function elimina(nome){
	scrivi(nome,'',-1);
}
elimina('toppage');

(1) http://www.andygambles.com/the-4-steps-you-need-to-take-to-comply-with-the-new-cookie-law/