Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(10) Cookies

Co je to cookies?

Cookie je soubor, který můžeme uloži na straně klienta (v prohlížeči). Používá se, protože normální data nemůžeme uložit bez souhlasu uživatele. Proto pro cookie platí bezpečnostní opatření, jako např. omezená velikost (4kB) a omezený počet cookies na jednu stránku (20). Další nevýhodou je, že uživatel může cookies zakázat. K čemu můžeme cookies třeba použít? Např. na přizpůsobení stránky bez nutnosti přihlášení uživatele. Uživatel si třeba vybere, jaký design vašich stránek bude chtít používat a informace o tom se může pomocí cookie uložit a při příští návštěvě načíst.

Cookies a jQuery

Ač se to může zdát neuvěřitelné, jQuery nenabízí žádné funkce pro práci s cookies. Ale někdo si dal tu práci a vytvořil plugin, který práci s cookies značně zjednodušuje. Co je to plugin, si můžete přečíst zde.

Jak začít

Protože se jedná o plugin, musíme ho naimportovat do našeho dokumentu. Můžete ho stáhnout zde a naimportovat pomocí tohoto kódu.

< script type="text/javascript" src="http://cesta.ke/skriptu/cookies.js"></script>

Důležité je, aby tento kód byl pod kódem importující knihovnu jQuery.

< script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
< script type="text/javascript" language="javascript" src="http://cesta.ke/skriptu/cookies.js"></script> 

Jak s pluginem pracovat?

Nejdříve uvedu, jak přibližně vypadá cookies. Má svoje jméno, hodnotu, dobu trvání, doménu, pro kterou cookie platí, adresář, pro který platí a zabezpečení. Povinné jsou pouze první dva, ale cookies se bez nastavení doby trvání smaže hned po ukončení prohlížeče. Plugin nabízí celou řadu funkcí, první kterou uvedu je pochopitelně funkce na vytvoření hodnoty. Jmenuje je set(). Aby se rozlišilo, že se jedná o plugin, před všechny funkce vztahující se ke cookies, se přidává $.cookies.set(). Obecný tvar této funkce je $.cookies.set(jméno, hodnota, nastavení).

  // Nejdříve vytvoříme objekt s nastavením,
  // který se skládá ze čtyř částí - 
  // domain, path, expiresAt a secure.
  
  var nastaveni = {
    domain: '*.ic.cz', 
    // Zde můžeme nastavit, které domény na našem serveru
    // mohou číst cookie.
    // Pokud bude prázdné, cookies může číst pouze doména, 
    // která cookies vytvořila.
    // V tomto případě by to bylo jquery.ic.cz,
    // ale protože jquery.ic.cz je subdoménou ic.cz, 
    // můžememe nastavit, aby cookies mohly číst 
    // všechny   stránky končící na ic.cz.
    // Ale nemůžeme nastavit třeba seznam.cz, z důvodu
    // zabezpečení cookies
    
    path: '/adresar/',
    // Nastavení adresáře - 
    // všechny stránky, které jsou v tomto adresáři,
    // mohou pracovat s cookies, které vytvoříme
    // pomocí tohoto scriptu.
    // V kombinaci s předchozím nastavením, mohou 
    // s cookies, které vytvoří tento script,          
    // pracovat stránky ve tvaru "*.ic.cz/adresar/" 
      
    expiresAt: new Date( 2011, 1, 3 ),
    // Nastavení datumu - 
    // nejdříve je rok, pak měsíc a nakonec den, takže 
    // v tomto případě je datum třetího ledna 2011.
    
    secure: false                      
    // Jestli se cookies mohou posílat pouze přes https - 
    // nabývá hodnot true (ano) nebo false (ne).
  }
  
  $.cookies.set("Pozadi", "#FF0000", nastaveni)
  // Vytvoření cookies -
  // první je jméno, následuje hodnota a poslední
  // je objekt s nastavením, který jsme vytvořili
  // předtím (píše se bez uvozovek!).
Další funkcí je get(), která slouží k získání hodnoty už vytvořené cookie. Má jeden parametr, a to jméno cookies.
var pozadi_cookies = $.cookies.get("Pozadi");
// do proměnné uloží hodnotu cookie "Pozadí", tedy "#FF0000"
Cookies samozřejmě můžeme i mazat. Máme na to funkci del(). Pracuje se s ní stejně jako s funkcí set().  Abychom cookie smazali, musíme zadat úplně stejné parametry, jako při jejím vytváření, kromě data skončení platnosti!

$.cookies.del("Pozadí", nastaveni);
// Smazání coookie - můžeme použít již vytvořený objekt s nastavení.
// Pokud místo jména cookie zadáme true (bez uvozovek), 
// smažou se všechny cookies.

Také můžeme otestovat, jestli prohlížeč podporuje cookies. Na tuto akci máme funkci test(). Jak se používá, uvidíte na následující ukázce.

var funguji_cookies = $.cookies.test();
// Do proměnné uloží informaci o tom, jestli
// funguje cookies. Jestli ano, bude uložena
// hodnota true a   pokud ne, uloží se false.

if(funguji_cookies == true) {
  // když cookies fungují, provede se kód 
  // umístěný tady
} else if(funguji_cookies == false) {
  // když cookies nefungují, provede se kód 
  // umístěný tady
}  

Cookies také můžeme filtrovat podle toho, jak se jmenují, za použití regulerních výrazů. Pokud nevíte, jak s nimi pracovat, koukněte se třeba sem.

var sada_cookies = $.cookies.filter("^Poz");
// V proměnné budou uložena všechna cookies,
// které začínají na "Poz".

Další funkce, kterou představím, je funkce setOptions(), která slouží k nastavení výchozích hodnot pro cookies.

$.cookies.setOptions("{secure: 'flase'}");
// Všechna cookies se mohou používat i v http,
// pokud není u konkrétní cookie uvedeno jinak.

Už nám zbývají pouze tři funkce, které využívají jQuery selektory. První je funkce cookify(), která vytvoří cookie se stejným názvem, jako je element který vybíráme, a hodnotu bude mít taky stejnou jako element.

$('#text').cookify();
// Vybere div s id "text", a jeho obsah uloží
// do cookie, která se bude jmenouvat "text".

Další funkce, kterou uvedu, je funkce cookieFill(), která funguje přesně obráceně. Prvku, který vybereme, nastaví hodnotu cookie se stejným jménem.

$('#text').cookieFill();                    
// Do divu "text" uloží hodnotu cookie,
// která se jmenuje taky "text"

Poslední funkcí je cookieBind(), která udělá to stejné jako cookify() a navíc zajistí, že v cookie bude aktuální hodnota, tj. že když se změní obsah prvku, změní se i cookie a naopak. Pracuje se s ní jako s předchozími dvěmi funkcemi, ukázka proto myslím není potřeba.

Zobrazit diskuzi