Ciasteczko (ang. cookie) to plik przechowujący krótką informację tekstową, który serwis internetowy wysyła do przeglądarki, a który przeglądarka odczytuje przy kolejnej wizycie użytkownika, np. w celu zapamiętania danych logowania lub innych preferencji. Zapewne wiesz o co biega, a jeśli nie, to odsyłam Cię do strony wszystkoociasteczkach.pl, na której temat rozbity jest na atomy.
Zarządzanie plikami cookies w jQuery jest banalne, o czym zaraz się przekonasz. Bibliotekę jQuery Cookies można pobrać ze strony https://code.google.com/p/cookies/downloads/list
Przykład:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <title>jQuery Cookies</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="jquery.cookies.2.2.0.min.js"></script> </head> <body> <script> $(document).ready(function() { // ustawia cookie $('#click1').click(function() { $.cookies.set('ciacho','mniam mniam, ale pycha ciasteczko :)'); }); // odczytuje wartość z cookie $('#click2').click(function() { var ciacho = $.cookies.get('ciacho'); alert(ciacho); }); // usuwa cookie $('#click2').click(function() { $.cookies.del('ciacho'); }); }); </script> <a href="#" id="click1">ustaw cookie</a> <a href="#" id="click2">pokaż cookie</a> <a href="#" id="click3">usuń cookie</a> </body> </html> |
Kod jest banalny i myślę, że nie wymaga dodatkowych wyjaśnień. A teraz wisienka na torcie, czyli komunikat o ciasteczkach na stronie. Skopiuj i zapisz poniższą zawartość:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <head> <title>Komunikat o ciasteczkach</title> <meta charset="utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="jquery.cookies.2.2.0.min.js"></script> <style type="text/css"> body { margin:0; padding:0; font-family:Verdana; font-size:12px; } #cookie-msg { background-color:#eee; border-bottom:1px solid #ccc; padding:10px; text-align:center; } #cookie-msg a { color:#ff0000; font-size:11px; } </style> </head> <body> <script> $(document).ready(function() { var cookie_info = $.cookies.get('cookie_info'); var date = new Date(); date.setTime(date.getTime() + (86400*365)); if (cookie_info == null) { $('body').html('<div id="msg"></div>'); $('#msg').html('<div id="cookie-msg"> Ta strona korzysta z plików cookies... <a href="#" id="close">nie pokazuj więcej tego komunikatu</a></div>'); } $('#close').click(function() { $.cookies.set('cookie_info','true',{expiresAt:date}); $('#msg').fadeOut(500); }); }); </script> </body> </html> |
Odśwież stronę, aby zobaczyć efekt pracy. Komunikat pokaże się, kiedy skrypt nie wykryje ciasteczka o nazwie cookie_info. Kliknięcie hiperłącza o nazwie close spowoduje ustawienie ciasteczka w przeglądarce i jednocześnie ukryje (fadeOut) okienko z komunikatem. Ciasteczko ustawione jest na 1 rok – parametr expiresAt: date.
I to wszystko, do następnego! ==>