Come ricaricare un CSS tramite cookie

Nello scorso articolo ho indicato un metodo per caricare un foglio di stile aggiuntivo in una pagina web utilizzando jQuery. Questa tecnica ha un difetto: nel momento in cui si ricarica la pagina, il foglio di stile non viene applicato nuovamente, e si rende quindi necessario ricaricarlo manualmente.

Possiamo però utilizzare dei cookie per memorizzare il nome del foglio di stile aggiuntivo e, durante il caricamento della pagina, ne verifichiamo l'esistenza ed il contenuto.

Per fare questo utilizziamo due funzioni JavaScript di appoggio:

setCookie(name, value)

e:

getCookie(name)

la cui implementazione è banale.

Riprendendo il codice usato nell'altro articolo, possiamo modificarlo aggiungendo la funzione setCookie() in questo modo:

$("#change-css").click(function() { $("link[rel=stylesheet]").attr({href : "new.css"}); setCookie("custom_style","style_1"); });

Dove custom_style è il nome del cookie che verrà memorizzato nel browser, mentre style_1 è il valore assegnato.

A questo punto non resta che verificare il cookie, ed eventualmente caricare il relativo foglio di stile. Nel caso il foglio di stile abbia lo stesso nome assegnato al valore del cookie, possiamo scrivere:

cookie = getCookie("custom_style"); if (cookie != null) { $("link[rel=stylesheet]").attr({href : cookie + ".css"}); }

Questo codice deve essere eseguito dopo che la pagina è stata caricata, ad esempio in un blocco come:

$(document).ready(function() { ... }

Chiaramente questi sono solo dei frammenti di codice che poi dovranno essere adattati alle esigenze specifiche della pagina.