Τα cookies σάς επιτρέπουν να αποθηκεύετε πληροφορίες χρήστη σε ιστοσελίδες.
Τα cookies είναι δεδομένα που αποθηκεύονται σε μικρά αρχεία κειμένου στον υπολογιστή σας.
Όταν ένας διακομιστής Ιστού έχει στείλει μια ιστοσελίδα σε ένα πρόγραμμα περιήγησης, η σύνδεση είναι τερματίζεται και ο διακομιστής ξεχνά τα πάντα για τον χρήστη.
Τα cookies εφευρέθηκαν για να λύσουν το πρόβλημα «πώς να θυμόμαστε πληροφορίες σχετικά με ο χρήστης":
Όταν ένας χρήστης επισκέπτεται μια ιστοσελίδα, το όνομά του/της μπορεί να αποθηκευτεί σε ένα cookie.
Την επόμενη φορά που ο χρήστης επισκεφτεί τη σελίδα, το cookie «θυμάται» το όνομά του.
Τα cookie αποθηκεύονται σε ζεύγη ονόματος-τιμής όπως:
username = John DoeΌταν ένα πρόγραμμα περιήγησης ζητά μια ιστοσελίδα από έναν διακομιστή, τα cookies που ανήκουν στη σελίδα προστίθενται στο αίτημα. Με αυτόν τον τρόπο ο διακομιστής λαμβάνει τα απαραίτητα δεδομένα για να «θυμάται» πληροφορίες σχετικά με τους χρήστες.
Κανένα από τα παρακάτω παραδείγματα δεν θα λειτουργήσει εάν το πρόγραμμα περιήγησής σας έχει απενεργοποιημένη την υποστήριξη τοπικών cookies.
Η JavaScript μπορεί να δημιουργήσει, να διαβάσει και να διαγράψει cookies με το document.cookie ιδιοκτησία.
Με το JavaScript, ένα cookie μπορεί να δημιουργηθεί ως εξής:
document.cookie = "username=John Doe";Μπορείτε επίσης να προσθέσετε μια ημερομηνία λήξης (σε ώρα UTC). Από προεπιλογή, το cookie διαγράφεται όταν το πρόγραμμα περιήγησης είναι κλειστό:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";Με μια παράμετρο διαδρομής, μπορείτε να πείτε στο πρόγραμμα περιήγησης σε ποια διαδρομή ανήκει το cookie. Από προεπιλογή, το cookie ανήκει στην τρέχουσα σελίδα.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Με τη JavaScript, τα cookies μπορούν να διαβαστούν ως εξής:
let x = document.cookie;Το document.cookie θα επιστρέψει όλα τα cookie σε μία συμβολοσειρά περίπου όπως: cookie1=value; cookie2=τιμή; cookie3=τιμή;
Με τη JavaScript, μπορείτε να αλλάξετε ένα cookie με τον ίδιο τρόπο που το δημιουργείτε:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Το παλιό cookie έχει αντικατασταθεί.
Η διαγραφή ενός cookie είναι πολύ απλή.
Δεν χρειάζεται να καθορίσετε μια τιμή cookie όταν διαγράφετε ένα cookie.
Απλώς ορίστε την παράμετρο λήξης σε μια προηγούμενη ημερομηνία:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";Θα πρέπει να ορίσετε τη διαδρομή cookie για να διασφαλίσετε ότι διαγράφετε το σωστό cookie.
Ορισμένα προγράμματα περιήγησης δεν θα σας επιτρέψουν να διαγράψετε ένα cookie εάν δεν καθορίσετε τη διαδρομή.
Η ιδιότητα document.cookie μοιάζει με μια κανονική συμβολοσειρά κειμένου. Αλλά δεν είναι.
Ακόμα κι αν γράψετε μια ολόκληρη συμβολοσειρά cookie στο document.cookie, όταν τη διαβάσετε ξανά, μπορείτε να δείτε μόνο το ζεύγος ονόματος-τιμής του.
Εάν ορίσετε ένα νέο cookie, τα παλαιότερα cookie δεν αντικαθίστανται. Το νέο cookie προστίθεται στο document.cookie, οπότε αν διαβάσετε το document.cookie πάλι θα πάρετε κάτι σαν:
cookie1=τιμή; cookie2=τιμή;
Εάν θέλετε να βρείτε την τιμή ενός καθορισμένου cookie, πρέπει να γράψετε ένα JavaScript συνάρτηση που αναζητά την τιμή του cookie στη συμβολοσειρά cookie.
Στο παράδειγμα που ακολουθεί, θα δημιουργήσουμε ένα cookie που αποθηκεύει το όνομα ενός επισκέπτη.
Την πρώτη φορά που ένας επισκέπτης θα φτάσει στην ιστοσελίδα, θα του ζητηθεί να συμπληρώσει το όνομά του. Στη συνέχεια, το όνομα αποθηκεύεται σε ένα cookie.
Την επόμενη φορά που ο επισκέπτης θα φτάσει στην ίδια σελίδα, θα λάβει ένα μήνυμα καλωσορίσματος.
Για το παράδειγμα θα δημιουργήσουμε 3 συναρτήσεις JavaScript:
Μια συνάρτηση για να ορίσετε μια τιμή cookie
Μια συνάρτηση για τη λήψη μιας τιμής cookie
Μια συνάρτηση για τον έλεγχο μιας τιμής cookie
Αρχικά, δημιουργούμε μια συνάρτηση που αποθηκεύει το όνομα του επισκέπτη σε μια μεταβλητή cookie:
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}Εξήγηση στο παράδειγμα:
Οι παράμετροι της παραπάνω συνάρτησης είναι το όνομα του cookie (cname), η τιμή του cookie (cvalue) και τον αριθμό των ημερών μέχρι τη λήξη του cookie (exdays).
Η συνάρτηση ορίζει ένα cookie προσθέτοντας μαζί το όνομα του cookie, το cookie τιμή και η συμβολοσειρά λήξης.
Στη συνέχεια, δημιουργούμε μια συνάρτηση που επιστρέφει την τιμή ενός καθορισμένου cookie:
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}Επεξήγηση λειτουργίας:
Πάρτε το όνομα cookie ως παράμετρο (cname).
Δημιουργήστε μια μεταβλητή (όνομα) με το κείμενο για αναζήτηση (cname + "=").
Αποκωδικοποιήστε τη συμβολοσειρά cookie, για να χειριστείτε cookies με ειδικούς χαρακτήρες, π.χ. '$'
Διαχωρίστε το document.cookie σε ερωτηματικά σε έναν πίνακα που ονομάζεται ca (ca = decodedCookie.split(';')).
Κάντε βρόχο στη συστοιχία ca (i=0; i < ca.length; i++) και διαβάστε κάθε τιμή c=ca[i]).
Εάν βρεθεί το cookie (c.indexOf(name) == 0), επιστρέψτε την τιμή του cookie (c.substring(name.length, c.length).
Εάν το cookie δεν βρεθεί, επιστρέψτε το "".
Τέλος, δημιουργούμε τη συνάρτηση που ελέγχει εάν έχει οριστεί ένα cookie.
Εάν το cookie έχει οριστεί, θα εμφανιστεί ένας χαιρετισμός.
Εάν το cookie δεν έχει οριστεί, θα εμφανίσει ένα παράθυρο προτροπής, ζητώντας το όνομα του χρήστη, και αποθηκεύει το cookie ονόματος χρήστη για 365 ημέρες, καλώντας τη συνάρτηση setCookie:
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
Το παραπάνω παράδειγμα εκτελεί τη συνάρτηση checkCookie() κατά τη φόρτωση της σελίδας.