Cookies a definované záložky ve stránce

Na rozsáhlejších webech plných zajímavých stránek má návštěvník často pocit, že by si potřeboval na své oblíbené stránky umístit jakési „záložky“, aby je mohl třeba při příští návštěvě jednoduše najít. V tomto článku si ukážeme, jak takovou funkčnost naprogramovat pomocí JavaScriptu a cookies.

V dalším textu budeme takovým oblíbeným stránkám či záložkám říkat „vyhlédnuté“ stránky, abychom je odlišili od výše uvedených termínů, any znamenají v řeči webu něco trochu jiného. Jako obvykle si nejprve uvedeme ukázku, kterou jsme pro účely článku zhustili na jednu stránku: pomocí tří následujících odkazů můžete k seznamu svých vyhlédnutých položek přidat jednu až tři uvedené stránky. Po reloadu této stránky pak jejich výpis najdete pod nápisem „Vaše vyhlédnuté stránky“. Protože je seznam vyhlédnutých stránek uložen v cookie, měl by zůstat nedotčen i po zavření prohlížeče a opětovném návratu na stránku po minutě či několika dnech:

Přidat k vyhlédnutým stránku o kočkách
Přidat k vyhlédnutým stránku o psech
Přidat k vyhlédnutým stránku o rybičkách

Vaše vyhlédnuté stránky:

Nejprve si ukážeme, jak jsou konstruovány HTML odkazy, s jejichž pomocí přidáváme stránky do seznamu vyhlédnutých (v praxi by zřejmě byl každý takový odkaz umístěn na samostatné stránce, např. s textem „Přidat tuto stránku k vyhlédnutým“). Zde je HTML kód prvního z trojice odkazů:

Nejedná se vlastně o nic jiného než o volání JavaScriptové funkce AddCookieId, přičemž první parametr této funkce určuje jméno cookie, v níž se přechovává seznam vyhlédnutých položek (v našem případě „MyFav“) druhým parametrem jest číslo přidávané stránky, které by pochopitelně mělo být v rámci celého webu jedinečné. Kód funkce AddCookieId vypadá takto:

Funkce nejprve zjistí, zda se v požadované cookie přidávané id stránky již nenachází, pokud ne, přidá jej na konec cookie a tuto uloží zpět na klientský počítač. Jednotlivá čísla stránek jsou v cookie oddělena středníky, celý řetězec tedy vypadá např . takto:
12;8;5;65;7;24;3;
..atd.

K ukládání a čtení cookie používáme stejně jako v předešlém článku na toto téma objektu MyCookie:

V tomto okamžiku již máme seznam vyhlédnutých položek korektně uložen v příslušné cookie, zbývá nám tedy na příslušném místě (např. v menu stránky) tento seznam zpětně načíst a reinterpretovat jedinečná čísla stránek zpět ve jména stránek a HTML odkazy tak, abychom mohli v uživatelsky příjemné formě zobrazit tabulku vyhlédnutých. K uložení jmen a URL adres využijeme jednorozměrného pole, kde jsou údaje o stránkách uspořádány ve trojicích. První údaj z každé trojice určuje ID stránky (to, které je ukládáno do cookie), druhý název stránky tak jak se zobrazí v seznamu vyhlédnutých a třetí údaj pečuje o URL adresu. Celou definici pole FavArray umístíme pravděpodobně do samostatného „.js“ souboru:

Jednoduchá funkce, která nakonec přečte uložený seznam vyhlédnutých z cookie a podle pole FavArray vypíše seznam jmen a adres odpovídajících stránek, se zde nazývá WriteFavourites. Prvním parametrem je opět jméno cookie, druhým pak překládací pole (v našem případě FavArray):

Volání této funkce pak vypadá následovně:

Několik poznámek na závěr

Zbývá dořešit podstatnou otázku: proč si vlastně komplikujeme život jakýmisi ID stránek a neukládáme do cookie přímo URL adresu a název stránky? Odpověď je jednoduchá: vedou nás k tomu velikostní limity. Počet cookies na klientském počítači, jakož i jejich délka, je dosti podstatně omezen, a ukládání textových informací (URL, název stránky) tuto limitovanou velikost velice rychle dokáže zaplnit. Různé prohlížeče překročení limitu řeší různě, ale téměř vždy způsobem obvyklým ve vrcholném středověku: provinilé cookie, nebo i jiné, která se ke své smůle nachází poblíž, je useknuta přečnívající končetina. Výsledek takového zacházení s našimi pečlivě uloženými údaji je – nehledě na morální aspekty – přinejmenším nepředvídatelný.

Druhou otázkou, kterou uvedený příklad nezohledňuje, je problém adresářových zanoření v URL odkazech. Protože předpokládáme, že funkce WriteFavourites bude umístěna někde ve společném include souboru a volána z různých stránek, které se mohou nacházet v různé hloubce adresářové struktury webu, můžeme dojít k problémům ohledně platnosti URL odkazů z pole FavArray. Řešení jsou v zásadě dvě, buď použít sdílenou stránku s výpisem tabulky vyhlédnutých (FRAME, IFRAME, OBJECT, include page apod.) nebo doplnit funkci WriteFavourites o třetí parametr udávající hloubku zanoření a příslušně pak modifikovat vypisované odkazy. To už si však necháme na některé další pokračování tohoto článku.

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

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.