Cookies a nenavštívené stránky

Že se odkazy na stránky, které uživatel dosud na našem webu nenavštívil, dají zvýraznit pomocí klasického HTML, případně v kombinaci s kaskádními styly, je všeobecně známo. V tomto článku si ukážeme, jak lze pomocí cookies a JavaScriptu vytvořit něco podobného, s tím vylepšením, že kromě návštěvy stránek můžeme sledovat i jiné „dosud neprovedené“ akce uživatele na našem webu – například odeslání formuláře.

Jak popsaný příklad vypadá, vidíme níže. Trojice nepříjemně blikajících odkazů ukazuje, co jsme na této stránce dosud neudělali – konkrétně se po nás chce navštívit jednu stránku a odeslat dva formuláře. Jakmile požadovanou akci dokončíme, příslušný blikající odkaz je nahrazen statickým obrázkem.

Většina funkcí potřebných k zajištění tohoto chování je zapouzdřena do objektu Nonvisited. Jeho kód si rozebereme po částech:

Při konstrukci objektu ukládáme do členské proměnné cn předaný parametr téhož jména, který určuje jméno použité cookie (do cookie ukládáme data o tom, které akce uživatel už vykonal). Trojice polí obsahuje odkazy na blikající, potažmo statické obrázky a URL adresy odkazů, vedoucích z těchto obrázků. Proměnná iLength obsahuje počet položek objektu (akcí).

Metoda Add slouži k přidávání jednotlivých akcí do objektu. Trojice parametrů imgLo, imgHi a URL určuje (v tomtéž pořadí): obrázek pro vykonanou akci, obrázek pro nevykonanou akci (v našem případě animovaný blikající gif) a URL odkazu.

Metoda WriteTable vykreslí do dokumentu tabulku se seznamem všech odkazů z objektu Nonvisited. Protože se jedná víceméně o grafickou práci, je zde prostor pro vlastní úpravu vzhledu vypisované tabulky. Z „technického“ hlediska je nejdůležitější řádek s výpisem tagu IMG, v němž rozlišujeme, zda vypsat „Hi“ (tj. ve významu „akce dosud neprovedena“) nebo „Lo“ („akce provedena“) obrázek. Informace o tom, zda byla či nebyla příslušná akce provedena, jsou uloženy právě v cookie se jménem this.cn, ve tvaru řetězce s čísly jednotlivých akcí oddělenými středníkem, např „0;10;25;3;“ atp.

Poznámka k číslům akcí: Jednotlivé akce jsou číslovány vzestupně, počínaje nulou, tak jak jsou přidávány do objektu Nonvisited prostřednictvím metody Add. První přidaná akce má tedy číslo 0, druhá 1 atd. Uvedené číslování nevyužívá jen interně metoda WriteTable, používá se také při volání poslední metody objektu s názvem OK (za definicí metody je jedna pravá závorka navíc jako ukončení definice celého objektu):

Metodu OK voláme tehdy, chceme-li označit akci s číslem index za splněnou.

Než začneme objekt Nonvisited používat, musíme ještě vytvořit jeho instanci (zde nazvanou stručně nv) a naplnit ji pomocí metody Add seznamem akcí. Na příslušném místě stránky rovněž voláním metody WriteTable vykreslíme tabulku akcí:

V uvedeném příkladu byla metoda OK volána následujícími způsoby: V případě odkazu na stránku byla volána na událost onLoad tagu BODY cílové stránky….

…kdy nesmíme zapomenout (vzhledem k tomu, že jde o jinou stránku) sdílet v cílové stránce definici objektu Nonvisited i jeho instance nv – to nám zajistí nejlépe sdílený .js soubor. V případě odesílání formuláře bylo volání metody OK zabezpečeno v handleru události onSubmit příslušného formuláře (navíc je do handleru přidáno obnovení stránky, to pro správné zobrazení tabulky odkazů, a vrácení false, to pro potřeby ukázky, aby nedocházelo ke zbytečnému odesílání formuláře serverovému skriptu). V následujícím rámečku jsou uvedena volání pro oba formuláře:

Nesmíme zapomenout na druhý použitý objekt, zapouzdřující obsluhu cookies. Je to náš známý objekt MyCookie, tentokrát (v metodě Write) poupravený o definici parametru path – vzhledem k tomu, že do jedné cookie můžeme voláním metody OK obkjektu Nonvisited teoreticky ukládat v různých adresářích, je potřeba explicitně zajistit její sdílení různými skripty v různých adresářích – k čemuž slouží právě syntaxe path=/, která zajistí platnost cookie v rootu webu i v podadresářích:

Poznámky na závěr

• K metodě OK: V uvedené metodě objektu Nonvisited při zápisu Cookie nastavujeme dobu platnosti Cookie na 7 dní. Modifikací tohoto parametru lze jednoduše nastavit, po jak dlouhé době budou návštěvníkem provedené akce opět vypadat jako „nenavštívené“.
• K použitým odkazům: v příkladu uvedené odkazy na odeslání formuláře jsou vytvořeny jako odkazy na záložky (bookmark) v rámci jedné stránky. Je třeba si uvědomit, že URL odkazu nemá víceméně nic společného s akcí samotnou – ta je považována za splněnou až voláním metody OK – tedy také můžeme více akcí označit za splněné „hromadně“ – třeba návštěvou jediné stránky.
• K dalším vylepšením: Jistě by se jich našlo hodně, užitečné může například být doplnění objektu Nonvisited a následně generované tabulky odkazů o specifikaci cílení odkazu – vlastnosti target.

Přeji vám příjemný den.