Ukládání dat pomocí JavaScriptu – forma cookies

Pokud je potřeba předat data mezi dvěma různými dokumenty HTML, tedy dočasně je někam uložit, obrací většina webmasterů svou pozornost ke skriptům prováděným na straně serveru. Pokud ovšem tento postup slouží pouze k tomu, aby data zadaná v jednom dokumentu byla použita ve druhém, jedná se mnohdy o zcela zbytečnou zátěž serveru. V tomto článku si ukážeme, jak uložit data do cookies pomocí JavaScriptu.

Pokud chceme, můžeme jednoduše na počítači klienta uložit cookie na jedné stránce a druhou stránkou je přečíst. Výhodou systému je, že můžeme data načíst i po delší době (při jedné návštěvě klienta jsou vytvořena a uložena, při druhé již pouze použita). Hlavním záporem ale je, že cookies jsou velice jednoduše ovlivnitelné a mnohé počítače je mají zablokovány kvůli bezpečnosti.

Zadejte, prosím, své osobní vstupní údaje:
<form name=“frm“ method=“POST“>
Jméno:<input type=“text“ size=“20″ name=“T1″>
Příjmení: <input type=“text“ size=“20″ name=“T2″>
Délku trvání vašeho zaměstnání (roky): <input type=“text“ size=“20″ name=“T3″>
Průměrný měsíční příjem: <input type=“text“ size=“20″ name=“T4″></p>
<p><a href=“javascript:posli();“><input type=“button“ name=“B1″ value=“OK“ onclick=“posli();“></a>
</form>

Poté co uživatel vyplní hodnoty – například Lukáš Plachý, 10 let, 15 000 Kč – a klikne na tlačítko OK, všechny hodnoty budou odeslány. Co se stane pak?

Vytvoření a zapsání údajů

Musí se spustit odpovídající skript – pro náš příklad jsem před formulář vložil funkci následujícího znění:

function posli(){
var str;
var vyprs=new Date();
vyprs.setDate(vyprs.getDate() – 365);
document.cookie=“Nastaveni=“+str+“; expires=“+vyprs.toGMTString()+“;“;
vyprs.setDate(365 + 365 + vyprs.getDate());
str=’_‘
str=str+document.all.frm.T1.value+’_‘; //1
str=str+document.all.frm.T2.value+’_‘; //2
str=str+document.all.frm.T3.value+’_‘; //3
str=str+document.all.frm.T4.value+’_‘; //4
str=str+’konec‘; //5
document.cookie=“Nastaveni=“+str+“; expires=“+vyprs.toGMTString()+“;“;
window.location.replace(„data1b.htm“);
}

• var str – definujeme si proměnnou str
• var vyprs=new Date(); – definujeme proměnnou vyprs, které okamžitě přiřadíme hodnotu dnešního data.
• vyprs.setDate(vyprs.getDate() - 365); – toto datum posuneme o 365 dnů zpět (tím vymažeme případné předchozí cookie).
• document.cookie="Data="+str+"; expires="+vyprs.toGMTString()+";"; – vytvoříme „nové“ cookie, ale budeme tvrdit, že už je zastaralé, čímž se odstraní.
• vyprs.setDate(365 + 365 + vyprs.getDate()); – datum vypršení platnosti cookie nastavíme naopak o rok dopředu.
• str='_' – toto první dělítko použijeme pro ošetření výstupu na další stránce, abychom v poli, které budeme na další stránce používat, měli první hodnotu v pole[1] a nikoliv pole[0].
• str=str+document.all.frm.T1.value+'_'; //1 – vložíme první hodnotu a nezapomene ji oddělit. String str v tutu chvíli vypadá takto: _Lukáš_. Pomocná poznámka //1 ukazuje, že se jedná o položku číslo 1.
• str=str+document.all.frm.T2.value+'_'; //2 – vložíme druhou hodnotu a nezapomene oddělit. String str v tutu chvíli vypadá takto: _Lukáš_Plachý_.
• str=str+document.all.frm.T3.value+'_'; //3
• str=str+document.all.frm.T4.value+'_'; //4
• str=str+'konec'; //5 – vložíme poslední hodnotu, která bude značit, že „pole“ hodnot je u konce. String str v tutu chvíli vypadá takto: _Lukáš_Plachý_10_15000_konec.
• document.cookie="Data="+str+"; expires="+vyprs.toGMTString()+";"; – klíčovým momentem je zapsání cookie, které musí mít povinné atributy jméno „Data=“ (rovnítko použijeme za chvíli), pak je dobré zapsat nějaké ty hodnoty +str+ a na závěr určíme dobu, kdy cookie vyprší. (Toto bude odstraněno za 1 rok (365 dní) – toGMTString() je funkce, která převede datum na odpovídající formát.)
• window.location.replace("data1b.htm"); – naviguje na další stránku.

Načtení cookie v dokumentu

Cookie, které jsme uložili, musíme v dalším dokumentu načíst. Procedura vypadá následovně:

function parsecookies(){
var cookieList=document.cookie.split(„; „);
var cookieArray = new Array();
for (var i=0; i < cookieList.length; i++){
var name = cookieList[i].split(„=“);
cookieArray[unescape(name[0])] = unescape(name[1]);
}
return cookieArray;
};
var cookie;
var cookies=parsecookies();
var setup = new Array ();
var max;
for (cookie in cookies)
for (var i=0; i < cookies[cookie].length; i++){
setup = cookies[cookie].split(„_“); // Vybíráme poslední (tj. nejaktuálnější) cookie patřící dané stránce
}

Tyto funkce jednoduše opište – funkce parsecookies rozdělí cookies a vrátí příslušné hodnoty v poli. Pole z našeho cookie bude vypadat takto:

cookieArray[0]=“Data“
cookieArray[1]=“_Lukáš_Plachý_10_15000″

Dalším krokem je rozdělení hodnot. Vytváříme nové proměnné (tedy obsah cookie daného dokumentu a setup, což je naše pole, které budeme chtít dostat). Cyklem for projíždíme všechny hodnotové řetězce a hledáme znak „_“. Pokud je nalezen, je řetězec rozseknut, a hodnota, která byla nalezena poslední, se ukládá do jedné položky pole. A tak to pokračuje dokola. Výsledkem je následující pole:

setup[1]=“Lukáš“
setup[2]=“Plachý“
setup[3]=“10″
setup[4]=“15000″
setup[5]=“konec“

Hodnoty můžete využít dle libosti. Třeba je vypsat do HTML stránky:

document.write („Váženy pane „+setup[2]+“, víte, že jste si za svou pracovní kariéru vydělal „+setup[3]*12*setup[4]+“Kč?“);

V dokumentu se pak vypíše: Vážený pane Plachý, víte, že jste si za svou kariéru vydělal 1800000Kč?.

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

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