JavaScript si pastrarea starii

Este cunoscut faptul ca http este un protocol fara stare : nu pastreaza nici o informatie relativ la paginile anterior vizitate în timpul deplasarii de la o pagina la alta într-un sit web. Acest lucru reprezinta o limitare în multe situatii; utilizînd JavaScript exista însa mai multe modalitati de a pastra informatia de stare:

• stocarea în fisiere cookie a informatiei ce trebuie pastrata, la client
• transmiterea prin intermediul legaturii URL, sub forma sirurilor e interogare
• stocarea în variabile din alte cadre sa 929i88j u variabile de formular ascunse
• stocarea pe serverul Web

Exista însa si probleme care apar în oricare dintre variantele de mai sus. De exemplu, fisierele cookie pot fi sterse (din greseala sau intentionat) sau pot sa expire, caz în care informatia de stare se pierde. Transmiterea prin intermediul legaturii URL restrictioneaza navigarea numai pe baza link-urilor URL din pagina (de exemplu, la folosirea butoanelor back si forward apare o problema.). Solutia este de a combina aceasta tehnica folosind în acelasi timp si variabile de formular ascunse. In general, cu toate dificultatile care trebuie depasite, toate aceste mecanisme de pastrare a starii s-au dovedit extrem de utile. In continuare vom prezenta cîteva dintre acestea.

Fisiere cookie

Fisierele cookie permit stocarea informatiilor în calculatorul browser-ului client, pentru regasirea ulterioara (Ex: pentru Internet Explorer, fisierele cookie pot fi vazute la Tools/Internet options/Settings/View Files). Este cunoscut faptul ca protocolul HTTP este un protocol fara stare, iar fisierele cookie reprezinta în acest sens cea mai performanta tehnica disponibila pentru pastrarea starii pe parte de client. In forma cea mai simpla, fisierele cookie se pastreaza sub forma unor perechi nume=valoare; caracteristicile mai avansate ale acestora permit însa si stabilirea altor proprietati, cum ar fi data expirarii (expires - cît va persista fisierul), care pagini vad informatia din cookie (path, domain), maniera de transmitere a fisierelor cookie prin retea (secure - securizat, criptat).

Combinatia nume-valoare este cantitatea minima de informatie de care este nevoie pentru a defini un cookie. Perechile nume-valoare trebuie separate în interiorul cookie-ului printr-un caracter punct-virgula si un spatiu. Dupa ultima valoare nu se pune ; . Stabilirea unui cookie se realizeaza prin setarea proprietatii cookie a obiectului document:

document.cookie=name + "=" + escape(value)

unde name reprezinta numele cookie-ului iar value valoarea sa. Se observa ca valoarea este codificata utilizînd functia escape (una din functiile JavaScript de pe primul nivel, si care nu apartine nici unui obiect); aceasta codifica în mod corect caracterele speciale din sirul primit ca argument (care nu sunt ASCII alfanumerice), cu exceptia cîtorva: *, @, _, +, -, /, etc.

Astfel, de exemplu functia SetCookieEZ stabileste în plus si momentul expirarii fisierului cookie (peste 3 ani) folosind proprietatea expires:

function SetCookieEZ(name,value)

Functia GetCookie regaseste un cookie în fisierul cookie dupa nume, returnînd valoarea:

function GetCookie(name)

return result; //returneaza valoarea gasita

Utilizarea sirului de interogare

Fata de fisierele cookie, aceasta metoda prezinta dezavantajul ca functioneaza numai pentru trecerea de la o pagina la pagina imediat urmatoare. Daca informatia trebuie pastrata de-a lungulunei serii de pagini, atunci mecanismul trebuie aplicat pentru fiecare pagina.

Astfel, în acest caz informatiile transmise trebuie adaugate la sfîrsitul adresei URL a paginii web, separate prin caracterul &. De exemplu :

<a href= "/pagina_urmatoare.html?nume=zmaranda&adresa=oradea">

Link catre pagina urmatoare</a>

Acest format este utilizat si pentru transmiterea variabilelor dintr-un formular, cu metoda GET. Se poate observa acest lucru daca se urmareste cum apare URL-ul pentru pagina în care apar rezultatele transmiterii formularului. Din acest motiv, o alta varianta de transmitere a variabilelor o reprezinta utilizarea unor cîmpuri de formular ascunse, folosind atributul type=hidden:

<input type="hidden" name="numecimpascuns" value="valoarecimpasuns">

In pagina urmatoare, informatia transmisa prin sirul de interogare poate fi citita utilizînd proprietatea search a obiectului Location. Din pacate, daca sirul de cautare contine mai multe perechi de tipul nume=valoare, trebuie realizata o cautare în cadrul acestuia pentru a gasi valoarea unui anumit parametru. De obicei acest lucru se realizeaza printr-o functie care utilizeaza diversele metode ale obiectului String.

Un exemplu de transmitere a unor parametri între doua pagini, utilizînd sirurile de interogare este urmatorul (pagina1.html) :

<html>
<head>
<title>Pagina de intrare</title>
</head>
<body>
<h2>Aceasta este pagina care contine link-ul cu parametri<h2>
<br>
<br>
<a href="pagina2.html?cbg=blue&ctxt=red">

Link obisnuit spre pagina urmatoare</a>

//un link catre pagina2.html cu parametri cbg (culoarea fondului) si ctxt (culoarea textului)
<br>
<br>
<script language=JavaScript>
val_cbg="yellow";
val_ctxt="brown";
document.writeln

("<a href=\"pagina2.html?cbg="+val_cbg+"&ctxt="+val_ctxt+"\">

Link scriptat spre pagina urmatoare</a>");

//valorile parametrilor nu sunt fixe, depind de valoarea variabilelor val_cbg respectiv cal_ctxt
</script>
</body>
</html>

Pagina înspre care se transmit parametrii se gaseste în fisierul pagina2.html. Aceasta trebuie sa interpreteze parametrii din sirul de interogare primit si sa utilizeze valoarea acestora pentru a realize operatiile dorite: în cazul acesta sa schimbe culoarea fondului si al textului paginii în conformitate cu valorile acestora. Functia care realizeaza regasirea valorilor parametrilor din cadrul sirului de interogare este regasire_param():

var bg_color; var txt_color;

function regasire_param()

//cautam valoarea parametrului ctxt
var startOfsource=handyString.indexOf("ctxt="); //index-ul subsirului "ctxt"
if (startOfsource!=-1)

}

In continuare, valorile obtinute pentru variabilele bg_color si respectiv txt_color sunt utilizate pentru a seta culoarea textului si a fondului paginii 2, utilizînd functia set_bg_txt():

function set_bg_txt()

Functiile sunt apelate înainte de terminarea sectiunii <head > a documentului, pentru a realize setarile de culoare si fond înaintea începerii afisarii documentului :

<head>

<script language=JavaScript>

regasire_param();
set_bg_txt();

</script>

</head>
<body>
<h2>Aceasta este pagina care interpreteaza parametri primiti<h2></body>

Documentul nu face altceva decît sa afiseze un text de culoarea specificata si pe fondul specificat. Functie de link-ul ales (pagina1.html) rezulta un text rosu pe un fond albastru sau un text maron pe un fond galben. Mecanismul transmiterii valorilor între doua pagini utilizînd sirul de interogare reprezinta deci o varianta destul de des utilizata pentru pastrarea a starii.