JavaScript Cookies

Τα cookies σας επιτρέπουν να αποθηκεύσετε πληροφορίες χρήστη στις ιστοσελίδες.

Τι είναι το cookie;

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

Όταν ο διακομιστής web στέλνει την ιστοσελίδα στον περιηγητή και η σύνδεση κλείνει, ο διακομιστής ξεχνά όλες τις πληροφορίες του χρήστη.

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

  • Όταν ο χρήστης επισκέπτεται την ιστοσελίδα, το όνομά του μπορεί να αποθηκευτεί στο cookie.
  • Η επόμενη φορά που ο χρήστης επισκέπτεται τη σελίδα, το cookie θα θυμάται το όνομά του.

Τα cookies αποθηκεύονται σε ζευγάρια ονόματος τιμής, όπως:

username = Bill Gates

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

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

Δημιουργία cookie μέσω JavaScript

Το JavaScript μπορεί να χρησιμοποιηθεί document.cookie Δημιουργία, ανάγνωση, διαγραφή cookie.

Με JavaScript, μπορείτε να δημιουργήσετε cookie ως εξής:

document.cookie = "username=Bill Gates";

Μπορείτε επίσης να προσθέσετε έγκυρη ημερομηνία (UTC χρόνος). Επίσης, οι cookies διαγράφονται όταν κλείνει ο περιηγητής:

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

Με τη χρήση path Παράμετροι, μπορείτε να πείτε στον περιηγητή ποια διαδρομή ανήκει το cookie. Από προεπιλογή, το cookie ανήκει στην τρέχουσα σελίδα.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Διαβάστε cookie μέσω JavaScript

Με τη χρήση του JavaScript, μπορείτε να διαβάσετε cookie ως εξής:

var x = document.cookie;

document.cookie Επιστρέφει όλα τα cookie σε μια γραμμή κειμένου, όπως: cookie1=value; cookie2=value; cookie3=value;

Αλλαγή cookie μέσω JavaScript

Με τη χρήση του JavaScript, μπορείτε να το αλλάξετε όπως το δημιουργήσατε cookie:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Το παλιό cookie θα αντικατασταθεί.

Διαγραφή cookie μέσω JavaScript

Η διαγραφή cookie είναι πολύ απλή.

Δεν χρειάζεται να καθορίσετε τη τιμή του cookie για να το διαγράψετε:

Παράθετε απευθείας expires Αποτελείται από μια ημερομηνία στο παρελθόν:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Πρέπει να καθορίσετε τη διαδρομή του cookie για να διασφαλίσετε ότι θα διαγράψετε το σωστό cookie.

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

Cookie 字符串

document.cookie Η ιδιότητα φαίνεται σαν μια κανονική γραμμή κειμένου. Δεν είναι.

Αmême αν προσπαθήσετε να document.cookie Γράψτε μια πλήρη 字符串 cookie, όταν το ξαναδιαβάσετε, θα δείτε μόνο το όνομα-τιμή του.

Εάν έχει οριστεί νέο cookie, το παλιό cookie δεν θα αντικατασταθεί. Το νέο Cookie θα προστεθεί στο document.cookie, οπότε αν διαβάσετε το document.cookie, θα δείτε κάτι σαν αυτό:

cookie1 = value; cookie2 = value;
　 　 　

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

Παράδειγμα JavaScript Cookie

Στο παρακάτω παράδειγμα, θα δημιουργήσουμε ένα cookie για να αποθηκεύσουμε το όνομα του επισκέπτη.

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

Ο επισκέπτης θα λάβει ένα μήνυμα καλωσορίσματος την επόμενη φορά που επισκεφθεί την ίδια σελίδα.

Για παράδειγμα, θα δημιουργήσουμε 3 JavaScript συναρτήσεις:

  1. Συνάρτηση ρύθμισης της τιμής cookie
  2. Συνάρτηση απόκτησης της τιμής cookie
  3. Συνάρτηση ελέγχου της τιμής cookie

Συνάρτηση ρύθμισης cookie

Πρώτα, δημιουργούμε μια συνάρτηση που αποθηκεύει το όνομα του επισκέπτη στη μεταβλητή cookie:

παράδειγμα

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Απόκρυψη παράδειγματος:

Οι παραμέτρους της παραπάνω συνάρτησης είναι: το όνομα του cookie (cname), η τιμή του cookie (cvalue) και ο αριθμός των ημερών που το cookie λήγει (exdays).

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

Συνάρτηση για την απόκτηση cookie

Στη συνέχεια, δημιουργούμε μια συνάρτηση που επιστρέφει την τιμή του καθορισμένου cookie:

παράδειγμα

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var 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).

Δημιουργία μεταβλητής (name) και του κειμένου που θα αναζητηθεί (CNAME"=").

Διακωδικοποίηση της αλφαβητικής αλυσίδας cookie, επεξεργασία cookie με ειδικούς χαρακτήρες, όπως το "$".

Διαχωρίζουμε το document.cookie με το τελεστικό σημείο σε ένα μπλοκ με το όνομα 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，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie λειτουργία:

παράδειγμα

λειτουργία checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Καλώς ήρθατε ξανά " + username);
    }
        username = prompt("Παρακαλώ εισάγετε το όνομά σας:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

τώρα συνδυάζουμε

παράδειγμα

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    για (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
λειτουργία checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Καλώς ήρθατε ξανά " + user);
    }
        user = prompt("Παρακαλώ εισάγετε το όνομά σας:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

Προσπαθήστε το個人

Οι παραδείγματα θα εκτελεστούν μετά την φόρτωση της σελίδας η λειτουργία checkCookie().