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.