Vom face un panou cu mai multe etichete. De fiecare dată când se face clic pe etichetă, este evidențiată în culori, iar valoarea corespunzătoare etichetei este salvată în fișierul cookie de pe computer, utilizând browserul. Apoi puteți utiliza două butoane pentru a afișa valoarea curentă stocată în cookie sau pentru a șterge modulul cookie.
În plus, acordați atenție demo-ului în timpul primei descărcări. Niciuna dintre etichete nu este evidențiată. După ce selectați unul, puteți actualiza pagina demonstrativă, iar eticheta pe care o selectați va rămâne evidențiată. Dacă ștergeți cookie-ul, selecția va fi eliminată din etichetă. După repornire, toate semnele rămân fără selecție. Acum, să vedem cum funcționează acest lucru.
Vom folosi jQuery pentru a gestiona cookie-urile, care vor folosi plugin-ul, care este proiectat să funcționeze cu magazinul cookie-urilor. Numele pluginului vorbește de la sine - Cookie.
Plugin-ul Cookie poate fi descărcat din secțiunea proiectului proiectului plug-in jQuery.
Codul HTML pare foarte simplu:
Creați cookie-uri
Deci, primul lucru de făcut este să adăugați codul obișnuit pentru a rula scriptul nostru după ce documentul este gata:
Acum vom crea un handler pentru evenimentul de clic. Funcția preventDefault () este o procedură standard jQuery pentru a împiedica browserul să navigheze prin referință atunci când butonul mouse-ului este apăsat pe el. Când un utilizator face clic pe un buton al mouse-ului pe o etichetă (care este de fapt o legătură), eliminăm clasa selectată din eticheta selectată în prezent și o setăm pe cea selectată.
Acum, adăugați clasa selectată la etichetă:
Preluarea și afișarea valorilor cookie
Ștergeți modulele cookie
În concluzie, ștergem cookie-urile. Acesta este un punct foarte interesant. Codul arată astfel:
Și asta e tot. Luați în considerare al treilea argument al funcției. Dacă te uiți la codul pluginului jquery.cookie.js. atunci se va constata că, cu valoarea celui de-al doilea argument la nul, variabila expiră în matricea opțiunilor este setată la -1:
Prin urmare, dacă vom trece cookieOptions ca al treilea argument, de exemplu, după cum urmează:
atunci munca codului nostru va fi ruptă, deoarece cookieOptions.expires va lua valoarea -1, care corespunde complet logicii pluginului.
Codul nostru se termină cu un sfârșit clasic:
Articole similare
Trimiteți-le prietenilor: