Μπισκότα μέσα JavaΣενάριο: Ορισμός, λήψη και διαγραφή παραδείγματος

Τι είναι τα Cookies;

Ένα cookie είναι ένα αρχείο δεδομένων που αποθηκεύεται στον υπολογιστή σας και είναι προσβάσιμο από το πρόγραμμα περιήγησής σας. Μπορεί επίσης να έχετε απολαύσει τα οφέλη των cookies, εν γνώσει σας ή εν αγνοία σας. Έχετε παραμείνει ποτέ συνδεδεμένοι σε έναν ιστότοπο όπως το Facebook, ώστε να μην χρειάζεται να πληκτρολογείτε τα στοιχεία σας κάθε φορά που προσπαθείτε να συνδεθείτε; Εάν ναι, τότε χρησιμοποιείτε cookies. Τα cookies αποθηκεύονται ως ζεύγη κλειδιού/τιμής.

Μια σημαντική διευκρίνιση: ένα cookie δεν περιέχει τον κωδικό πρόσβασής σας. Περιέχει ένα αναγνωριστικό περιόδου σύνδεσης, το οποίο είναι ένα τυχαίο διακριτικό που εκδίδει ο διακομιστής μετά από μια επιτυχημένη σύνδεση. Ο διακομιστής αντιστοιχίζει αυτό το διακριτικό με τον λογαριασμό σας, επομένως ο ίδιος ο κωδικός πρόσβασης δεν φεύγει ποτέ από τον διακομιστή.

Γιατί χρειάζεστε ένα Cookie;

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

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

Javascript Ρύθμιση cookie

Μπορείτε να δημιουργήσετε cookies χρησιμοποιώντας την ιδιότητα document.cookie ως εξής.

document.cookie = "cookiename=cookievalue"

Μπορείτε ακόμη και να προσθέσετε μια ημερομηνία λήξης στο cookie σας, έτσι ώστε το συγκεκριμένο cookie να αφαιρεθεί από τον υπολογιστή την καθορισμένη ημερομηνία. Η ημερομηνία λήξης θα πρέπει να οριστεί σε μορφή UTC/GMT. Εάν δεν ορίσετε την ημερομηνία λήξης, το cookie θα αφαιρεθεί όταν ο χρήστης κλείσει το πρόγραμμα περιήγησης.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Μπορείτε επίσης να ορίσετε τον τομέα και τη διαδρομή για να καθορίσετε σε ποιον τομέα και σε ποιους καταλόγους στον συγκεκριμένο τομέα ανήκει το cookie. Από προεπιλογή, ένα cookie ανήκει στη σελίδα που ορίζει το cookie.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//δημιουργία ενός cookie με έναν τομέα της τρέχουσας σελίδας και μια διαδρομή που καλύπτει ολόκληρο τον τομέα.

JavaΣενάριο Λήψη Cookie

Μπορείτε να αποκτήσετε πρόσβαση στο cookie ως εξής, το οποίο θα επιστρέψει όλα τα cookies που έχουν αποθηκευτεί για τον τρέχοντα τομέα.

var x =  document.cookie

Η τιμή που επιστρέφεται είναι μια μεμονωμένη συμβολοσειρά στη μορφή name1=value1; name2=value2Δεν υπάρχει ενσωματωμένη μέθοδος για την ανάγνωση ενός cookie με βάση το όνομα, επομένως η συμβολοσειρά πρέπει να διαιρεθεί. Ο παρακάτω βοηθός επιστρέφει μία μόνο τιμή και μια κενή συμβολοσειρά όταν το όνομα απουσιάζει.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Παραγωγή:

Ann Smith
true

JavaΣενάριο Διαγραφή Cookie

Για να διαγράψετε ένα cookie, απλώς πρέπει να ορίσετε την τιμή του cookie σε empty και να ορίσετε την τιμή expires σε μια ημερομηνία που έχει ήδη παρέλθει.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

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

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Επεξήγηση χαρακτηριστικών cookie

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

Το SameSite αξίζει ιδιαίτερης προσοχής επειδή τα προγράμματα περιήγησης εφαρμόζουν πλέον μια προεπιλογή. Οι τρεις αποδεκτές τιμές συμπεριφέρονται ως εξής.

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

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Δοκιμάστε αυτό το Παράδειγμα μόνοι σας

Το παρακάτω σενάριο συνδυάζει και τις τρεις λειτουργίες. Δημιουργεί ένα cookie με ημερομηνία λήξης που μετριέται σε ημέρες, το διαβάζει ξανά ονομαστικά και χαιρετά έναν επισκέπτη που επιστρέφει. Ειδικές οδηγίες για να λειτουργήσει ο κώδικας… Πατήστε το κουμπί εκτέλεσης δύο φορές.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Αναμενόμενη συμπεριφορά:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code εξήγηση: Η συνάρτηση createCookie μετατρέπει έναν αριθμό ημερών σε χιλιοστά του δευτερολέπτου και τις προσθέτει στην τρέχουσα ώρα, η οποία παράγει την ημερομηνία λήξης. Η συνάρτηση accessCookie διαιρεί τη συμβολοσειρά cookie σε ερωτηματικά, περικόπτει κάθε τμήμα και συγκρίνει την αρχή του τμήματος με το ζητούμενο όνομα. Η συνάρτηση checkCookie συνδέει τα δύο μεταξύ τους κατά τη φόρτωση της σελίδας.

Cookies vs localStorage vs sessionStorage

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

Ο πρακτικός κανόνας είναι απλός. Εάν ο διακομιστής χρειάζεται την τιμή, χρησιμοποιήστε ένα cookie. Εάν τη χρειάζεται μόνο η σελίδα, χρησιμοποιήστε το localStorage ή το sessionStorage, επειδή αυτές οι τιμές δεν προσθέτουν ποτέ βάρος σε ένα αίτημα δικτύου.

Ο κώδικας διαχείρισης cookie συνήθως είναι κοινόχρηστος σε πολλές σελίδες, επομένως ελέγξτε τον εσωτερικός και εξωτερικός JavaΓραφή πριν αποφασίσετε πού θα το τοποθετήσετε. Ο διαχωρισμός συμβολοσειρών που χρησιμοποιείται εδώ βασίζεται JavaΣυμβολοσειρές σεναρίου και JavaΜέθοδοι πίνακα σεναρίων, και περαιτέρω λειτουργικά σενάρια εμφανίζονται στο πρακτικός JavaΠαραδείγματα κώδικα σεναρίου.

Συχνές Ερωτήσεις