Εισαγωγή στα Cookies: Κατανόηση και Εργασία με JavaScript Cookies

Preslav Dobrev2022-10-25 · 8 min read

Εισαγωγή στα Cookies: Κατανόηση και Εργασία με JavaScript Cookies

Τα cookies του προγράμματος περιήγησης, ή HTTP cookies, είναι αρχεία κειμένου που αποτελούνται από μικροσκοπικά κομμάτια δεδομένων. Οι ιστότοποι χρησιμοποιούν αυτές τις πληροφορίες για να παρακολουθούν τη διαδρομή ενός χρήστη, επιτρέποντάς τους να προσφέρουν προσαρμοσμένες λειτουργίες και να βελτιώσουν την εμπειρία περιήγησής τους. Τα cookies μπορούν να αποθηκεύσουν έως και 4096 bytes δεδομένων. Ωστόσο, μπορούμε να προσθέσουμε περιορισμένο αριθμό cookies ανά τομέα, ανάλογα με το πρόγραμμα περιήγησης.

Η βασική κατανόηση των HTTP cookies είναι απαραίτητη για κάθε χρήστη του διαδικτύου, είτε περιηγείστε απλώς για διασκέδαση είτε βιοπορίζεστε από αυτό. Αυτός ο οδηγός θα σας εισαγάγει στα cookies και στους διάφορους τύπους τους λεπτομερώς. Η εστίασή μας είναι να σας βοηθήσουμε να κατανοήσετε και να εργαστείτε με τα JavaScript Cookies.

Ας ξεκινήσουμε!

Προαπαιτούμενα

Για να παρακολουθήσετε αυτό το σεμινάριο, πρέπει να έχετε:

Μια βασική κατανόηση της JavaScript.

Ξεκινώντας με τα JavaScript Cookies

Η εργασία με JavaScript cookies είναι απλή. Επιτρέπει τη δημιουργία, την επεξεργασία και την ανάκτηση cookies χωρίς κόπο. Επιπλέον, μπορούμε να χρησιμοποιήσουμε την ιδιότητα cookie του αντικειμένου Document για να χειριστούμε και να περιορίσουμε τις ιδιότητες των cookies, όπως το όνομα, την τιμή και το μήκος, για να αναφέρουμε μερικές.

Τύποι Cookies

Αρχικά, ας ρίξουμε μια ματιά στους διαφορετικούς τύπους cookies:

First-Party Cookies

Αυτά τα cookies δημιουργούνται και αποθηκεύονται κάθε φορά που ένας χρήστης επισκέπτεται έναν ιστότοπο. Επιτρέπει στους ιδιοκτήτες ιστότοπων να αποκτούν λεπτομερή εικόνα για τα δεδομένα των χρηστών και να τους παρέχουν μια καλύτερη εμπειρία περιήγησης.

Persistent Cookies

Για αυτό το είδος cookie, ο εκδότης ορίζει μια ημερομηνία λήξης. Επομένως, χρησιμοποιείται για πολύ μεγαλύτερο χρονικό διάστημα. Αυτό σημαίνει ότι ακόμα κι αν κλείσετε το πρόγραμμα περιήγησής σας, το cookie θα παραμείνει σε αυτό. Επίσης, τα δεδομένα επιστρέφονται στον εκδότη κάθε φορά που επισκέπτεστε τον ιστότοπο που δημιούργησε το cookie.

Session Cookies

Αυτά τα cookies είναι μόνο προσωρινά και θα αποθηκευτούν στη μνήμη του προγράμματος περιήγησής σας όσο αυτό είναι ανοιχτό. Όταν το κλείσετε, το cookie αφαιρείται από το ιστορικό του προγράμματος περιήγησής σας, καθιστώντας τα χαμηλότερου κινδύνου ασφαλείας. Δεν χρειάζεται να καθορίσετε ημερομηνία λήξης.

Third-Party Cookies

Τα Third-party cookies δημιουργούνται από έναν ιστότοπο που δεν επισκέπτεστε αυτήν τη στιγμή. Ως επί το πλείστον, αυτά τα cookies είναι χρήσιμα για την παρακολούθηση ενός χρήστη που έχει κάνει κλικ σε μια διαφήμιση, συνδέοντάς τον με τον τομέα που τον παρέπεμψε.

Δημιουργία Cookies

Μπορούμε να δημιουργήσουμε cookies χρησιμοποιώντας δύο μεθόδους:

Αποστολή Set-Cookie στην κεφαλίδα απόκρισης HTTP. Ανάλογα με τις τεχνολογίες που χρησιμοποιούνται για τον διακομιστή ιστού, μπορείτε να διαχειριστείτε τις κεφαλίδες cookie χρησιμοποιώντας εργαλεία και βιβλιοθήκες. Τα cookies μπορούν να περιέχουν πληροφορίες όπως ημερομηνία λήξης και χαρακτηριστικά ασφαλείας όπως η οδηγία secure και η HttpOnly σημαία.

HttpOnly: Υποδεικνύει ότι το πρόγραμμα περιήγησης δεν μπορεί να διαβάσει ή να τροποποιήσει τα cookies.
Secure: Αυτό υποδεικνύει ότι το cookie μπορεί να σταλεί μόνο μέσω HTTPS.

Χρησιμοποιώντας την ιδιότητα document.cookie της JavaScript, μπορούμε να δημιουργήσουμε, να διαβάσουμε και να διαγράψουμε cookies.

Βήμα 1 — Δημιουργία ενός Cookie

Στη συνέχεια, θα δείξουμε τη διαδικασία δημιουργίας ενός JavaScript cookie. Τα cookies αποθηκεύονται σε μορφή ζεύγους ονόματος-τιμής:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Στο παραπάνω cookie, UserName είναι το όνομα του cookie ενώ CloudSigma είναι η τιμή που είναι αποθηκευμένη σε αυτό.

Το cookie έχει μια ημερομηνία λήξης. Από προεπιλογή, διαγράφεται αυτόματα με το κλείσιμο του προγράμματος περιήγησης. Μπορείτε επίσης να προσθέσετε μια ημερομηνία λήξης στο cookie σας:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Από προεπιλογή, τα cookies ανήκουν στην τρέχουσα σελίδα. Ωστόσο, μπορούμε επίσης να καθορίσουμε το cookie με τη βοήθεια της path παραμέτρου:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age έναντι Cookie Expire

Ανάλογα με τις ανάγκες σας, μπορείτε να χρησιμοποιήσετε αυτές τις δύο στρατηγικές για να ορίσετε την ημερομηνία λήξης ενός cookie. Η διαφορά μεταξύ των δύο είναι ότι η expires ορίζει μια ημερομηνία λήξης κατά την οποία διαγράφεται ένα cookie. Αντίθετα, η max-Age ορίζει τον χρόνο σε δευτερόλεπτα κατά τον οποίο ένα cookie θα διαγραφεί. Δυστυχώς, max-age δεν υποστηρίζεται από όλα τα προγράμματα περιήγησης.

Παράδειγμα ορισμού ενός cookie χρησιμοποιώντας expires και max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // σε χιλιοστά του δευτερολέπτου
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // σε χιλιοστά του δευτερολέπτου

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Βήμα 2 — Ανάγνωση ενός Cookie

Το document.cookie χαρακτηριστικό επιστρέφει μια συμβολοσειρά. Εάν υπάρχουν δύο ή περισσότερα cookies, χρησιμοποιούμε ένα semicolon ( ;) και κενό διάστημα για να τα διαχωρίσουμε.

Χρησιμοποιούμε τη μέθοδο split() για να εξαγάγουμε ένα μεμονωμένο cookie από μια λίστα cookies. Αυτή η μέθοδος αναλύει τη λίστα σε μεμονωμένα ζεύγη ονομάτων και τιμών. Μόλις γίνει αυτό, μπορείτε στη συνέχεια να αναζητήσετε το cookie-στόχο που θέλετε να διαβάσετε:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Καλώς ορίσατε ξανά, " + UserName);
} else {
    firstName = prompt("Εισάγετε το UserName σας:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Καλώς ορίσατε ξανά, " + UserName);

} else {

firstName = prompt("Εισάγετε το UserName σας:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Ας κατανοήσουμε τις συναρτήσεις που δημιουργήσαμε στον κώδικα:

Όνομα συνάρτησης	Περιγραφή
setCookie()	Δημιουργεί ένα cookie
getCookie()	Διαβάζει την τιμή του cookie
checkCookie()	Επαληθεύει εάν το UserName έχει οριστεί ή όχι.

Στο επόμενο βήμα, θα μάθουμε πώς να ενημερώνουμε ένα cookie.

Βήμα 3 — Ενημέρωση ενός Cookie

Μπορούμε να ορίσουμε νέες τιμές στα χαρακτηριστικά του cookie μας. Στο παράδειγμά μας, ας ενημερώσουμε τη συνδρομή του χρήστη από μηνιαίο πρόγραμμα σε τριμηνιαίο πρόγραμμα.

Ας ενημερώσουμε το χαρακτηριστικό max-age του cookie UserName από 30 ημέρες σε 180 ημέρες:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Βήμα 4 — Διαγραφή ενός Cookie

Η μετονομασία του cookie με το ίδιο όνομα θα διαγράψει το cookie που θέλετε να σβήσετε. Μπορούμε να διαγράψουμε ένα cookie ορίζοντας το χαρακτηριστικό max-age σε 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Επιπλέον, εάν το cookie έχει καθορισμένη διαδρομή, διαγράψτε το προσδιορίζοντάς την:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Συμπέρασμα

Τα cookies είναι απαραίτητα για τη σωστή λειτουργία ενός ιστότοπου. Σε αυτόν τον εισαγωγικό οδηγό, συζητήσαμε λεπτομερώς για τα cookies και τους διάφορους τύπους τους. Επιπλέον, μάθαμε να εργαζόμαστε με cookies με τη βοήθεια ενός παραδείγματος. Τώρα που αισθάνεστε άνετα με τη χρήση των JavaScript cookies, ξεκινήστε να δημιουργείτε προσαρμοσμένα cookies για να μάθετε και να εξερευνήσετε περισσότερα πάνω στο θέμα.

Επιπλέον, υπάρχουν πολλοί οδηγοί για JavaScript και web development που μπορείτε να εξερευνήσετε από το blog:

Καλή συνέχεια στον προγραμματισμό!

Preslav Dobrev

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.