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.
Mohlo by vás také zajímat
-
Aktualizujete svoji .NET webovou aplikaci? Může se hodit app_offline.htm
10. července 2024 -
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
AI v programování: Jak používat GitHub Copilot (část 1)
12. února 2024
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024