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ů:

<a href="javascript:AddCookieId(‚MyFav‘,10)">Přidat k vyhlédnutým stránku o kočkách</a>

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:

function AddCookieId( cn, id ) {
    var idstr = id + ";"
    if((fx=MyCookie.Read(cn))==null) fx="";
    if (fx.indexOf(idstr)==-1) {
        fx += idstr;
        MyCookie.Write(cn,fx,365);
    }
}

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:

var MyCookie = {
    Write:function(name,value,days) {
        var D = new Date();
        D.setTime(D.getTime()+86400000*days)
        document.cookie = escape(name)+"="+escape(value)+
            ((days == null)?"":(";expires="+D.toGMTString()))
        return (this.Read(name) == value);
    },
    Read:function(name) {
        var EN=escape(name)
        var F=‘ ‚+document.cookie+‘;‘, S=F.indexOf(‚ ‚+EN);
        return S==-1 ? null : unescape(     F.substring(EN=S+EN.length+2,F.indexOf(‚;‘,EN))    );
    }
}

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:

var FavArray = new Array(
    10, ‚Kočky‘, ‚http://www.kocky.cz‘,
    15, ‚Psi‘, ‚pes.htm‘,
    20, ‚Slepice‘, ‚slepice.asp?zrni=100‘,
    1, ‚Rybky‘, ‚http://www.akvarijnirybicky.cz‘
);

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):

function WriteFavourites( cn, fa ) {
    if((fx=MyCookie.Read(cn))==null) fx="";
    for(i=0; i<fa.length; i+=3 ) {
        if (fx.indexOf(fa[i]+";")!=-1) {
            document.write( ‚<a href="‘ + fa[i+2] + ‚">‘ + fa[i+1] + ‚</a><br>‘ );
        }
    }   
}

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

WriteFavourites(‚MyFav‘,FavArray)

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.

Žádný příspěvek v diskuzi

Odpovědět