μαθημα javascript: χρηση JavaScript Cookies Nikos Balatsoukas Ιουλίου 26, 2013 Javascript
Σε αυτό το μαθημα javascript θα εξηγήσουμε τη χρήση των cookies από τη γλώσσα javascript.
javascript
Τα javascript cookies χρησιμοποιούνται συνήθως για την αναγνώριση χρήστη (user). Τι είναι το Cookie; Το cookie είναι μια μεταβλητή που αποθηκεύεται στον υπολογιστή του χρήστη. Κάθε φορά που ο χρήστης (από τον ίδιο υπολογιστή) επισκέπτεται τη σελίδα με τον ίδιο φυλλομετρητή (browser), θα έχει πρόσβαση στο cookie. Μέσω της JavaScript, μπορείτε τόσο να δημιουργήσετε όσο και να αποκτήσετε πρόσβαση στο cookie. To μαθημα javascript περιλαμβάνει παραδείγματα χρήσης των javascript cookies: Name cookie: Την πρώτη φορά που ο επισκέπτης ανοίγει την ιστοσελίδα σας, πρέπει να συμπληρώσει το όνομά του. Για παράδειγμα «Maria»
Το όνομα αποθηκεύεται σε ένα cookie. Την επόμενη φορά που ο επισκέπτης ανοίγει την ιστοσελίδα σας, θα λάβει ένα μήνυμα της μορφής «μαθημα javascript για τη Maria!» Το όνομα του χρήστη το διαβάζει η javascript από το αποθηκευμένο cookie. Date cookie: Την πρώτη φορά που ο επισκέπτης ανοίγει την ιστοσελίδα σας, η τρέχουσα ημερομηνία αποθηκεύεται σε ένα cookie. Το όνομα αποθηκεύεται σε ένα cookie. Την επόμενη φορά που ο επισκέπτης ανοίγει την ιστοσελίδα σας, θα λάβει ένα μήνυμα της μορφής «Το τελευταίο μαθημα javascript που διαβάσατε κάνοντας επίσκεψη στην ιστοσελίδα μας ήταν στις 10 Ιουλίου!» Την ημερομηνία τη διαβάζει η javascript από το αποθηκευμένο cookie.
μαθημα javascript Δημιουργία και αποθήκευση ενός Cookie: Σε αυτό το μαθημα javascript θα δημιουργήσουμε ένα cookie που αποθηκεύει το όνομα του επισκέπτη. Την πρώτη φορά που ο επισκέπτης ανοίγει την ιστοσελίδα θα του ζητηθεί να συμπληρώσει το όνομά του. Το όνομα αποθηκεύεται σε ένα cookie. Την επόμενη φορά που ο επισκέπτης θα ανοίξει την ιστοσελίδα, θα λάβει ένα μήνυμα καλωσορίσματος Αρχικά, δημιουργούμε μια συνάρτηση που αποθηκεύει το όνομα του επισκέπτη σε μια μεταβλητή cookie:
1
function setCookie(c_name,value,exdays)
2
{
3
var exdate=new Date();
4
exdate.setDate(exdate.getDate() + exdays);
5
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
6
document.cookie=c_name + "=" + c_value;
7
}
Οι παράμετροι αυτής της συνάρτησης είναι το όνομα (name) του cookie, η τιμή (value) του cookie, και το πλήθος ημερών μέχρι να λήξει το cookie Στην παραπάνω συνάρτηση πρώτα μετατρέπουμε το πλήθος των ημερών σε έγκυρη ημερομηνία, και στη συνέχεια προσθέτουμε το πλήθος ημερών μέχρι να λήξει το cookie. Μετά προσθέτουμε το όνομα του cookie (cookie name), την τιμή του cookie (value) και την ημερομηνία λήξης (expiration date) στο document.cookie object Πως διαβάζουμε την τιμή των javascript cookies: Στη συνέχεια φτιάχνουμε μια άλλη συνάρτηση η οποία επιστρέφει την τιμή ενός συγκεκριμένου cookie:
1
function getCookie(c_name)
2
{
3
var c_value = document.cookie;
4
var c_start = c_value.indexOf(" " + c_name + "=");
5
if (c_start == -1)
6
{
7
c_start = c_value.indexOf(c_name + "=");
8
}
9
if (c_start == -1)
10
{
11
c_value = null;
12
}
13
else
14
{
15
c_start = c_value.indexOf("=", c_start) + 1;
16
var c_end = c_value.indexOf(";", c_start);
17
if (c_end == -1)
18
{
19
c_end = c_value.length;
20
}
21
c_value = unescape(c_value.substring(c_start,c_end));
22
}
23
return c_value;
24
}
Ο παραπάνω κώδικας χρησιμοποιεί τη μέθοδο indexOf() για να αναζητήσει το cookie name μέσα στο document’s cookie string. Η πρώτη indexOf() method θα επιστρέψει τη θέση (position) όπου βρέθηκε το cookie. Πως ελέγχουμε την τιμή ενός Cookie: Τέλος, φτιάχνουμε μια συνάρτηση η οποία παρουσιάζει ένα μήνυμα καλωσορίσματος εάν το cookie είναι ορισμένο, και εάν το cookie δεν είναι ορισμένο τότε θα παρουσιάζει ένα prompt box, που θα ζητάει το όνομα του user, και αποθηκεύει το username cookie για 365 μέρες, καλώντας το setCookie function:
1
function checkCookie()
2
{
3
var username=getCookie("username");
4
if (username!=null && username!="")
5
{
6
alert("Welcome again " + username);
7
}
8
else
9
{
10
username=prompt("Please enter your name:","");
11
if (username!=null && username!="")
12
{
13
setCookie("username",username,365);
14
}
15
16
}
}
Στη συνέχεια παρουσιάζουμε ολόκληρο τον κώδικα που φτιάξαμε σε αυτό το μαθημα javascript:
1
<script type="text/javascript">// <![CDATA[
2
function getCookie(c_name)
3
{
4
var c_value = document.cookie;
5
var c_start = c_value.indexOf(" " + c_name + "=");
6
if (c_start == -1)
7
{
8
c_start = c_value.indexOf(c_name + "=");
9
}
10
if (c_start == -1)
11
{
12
c_value = null;
13
}
14
else
15
{
16
c_start = c_value.indexOf("=", c_start) + 1;
17
var c_end = c_value.indexOf(";", c_start);
18
if (c_end == -1)
19
{
20
c_end = c_value.length;
21
}
22
c_value = unescape(c_value.substring(c_start,c_end));
23
}
24
return c_value;
25
}
26
27
function setCookie(c_name,value,exdays)
28
{
29
var exdate=new Date();
30
exdate.setDate(exdate.getDate() + exdays);
31
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
32
document.cookie=c_name + "=" + c_value;
33
}
function checkCookie() { var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome again " + username); } else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,365); } }
} // ]]> Σε αυτό το άρθρο είδαμε ένα μαθημα javascript με τις βασικές αρχές της χρήσης των JavaScript Cookies. Αυτά τα παραδείγματα πάνω στα JavaScript Cookies αποτελούν τη βάση για οτιδήποτε θελήσετε να κάνετε σχετικά με το θέμα (δηλαδή τα JavaScript Cookies)
Date cookie getCookie javascript javascript cookies JavaScript Cookies με παραδείγματα μαθημα javascript
Πηγή: http://www.infopolis.gr/javascript-cookies/