كوكي جافا سكريبت

الكوكيز تسمح لك بحفظ معلومات المستخدم في صفحات الويب.

ما هو الكوكيز؟

الكوكيز هي بيانات يتم حفظها في ملفات نصية صغيرة على جهازك.

بعدما يرسل خادم الويب صفحة إلى المتصفح، يتم إغلاق الاتصال، وينسى الخادم كل شيء عن المستخدم.

تم اختراع الكوكيز لحل مشكلة "كيفية تذكر معلومات المستخدم".

  • عندما يزور المستخدم صفحة، يمكن حفظ اسمه في الكوكيز.
  • عندما يزور المستخدم الصفحة مرة أخرى، سيقوم الكوكيز ب"تذكر" اسمه.

يتم حفظ الكوكيز في أزواج من الأسماء والقيم، مثل:

username = Bill Gates

عندما يطلب المتصفح صفحة من الخادم، يتم إضافة الكوكيز التي تنتمي إلى الصفحة إلى الطلب. بهذا يكتسب الخادم البيانات اللازمة ل"تذكر" معلومات المستخدم.

إذا كان دعم الكوكيز المحلية في المتصفح معطلًا، فإن جميع الأمثلة التالية لن تعمل.

إنشاء الكوكيز باستخدام JavaScript

يمكن استخدام JavaScript document.cookie إنشاء، قراءة، وإزالة الكوكيز بمزايا.

باستخدام JavaScript، يمكنك إنشاء الكوكيز مثلًا:

document.cookie = "username=Bill Gates";

يمكنك أيضًا إضافة تاريخ صلاحية (بوقت UTC). بالافتراض، سيتم حذف الكوكيز عند إغلاق المتصفح:

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

من خلال path المعامل، يمكنك إخبار المتصفح بما هو مسار الكوكي. بالافتراض، يكون الكوكي في الصفحة الحالية.

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

قراءة الكوكي عبر JavaScript

من خلال JavaScript، يمكنك قراءة الكوكي كما يلي:

var x = document.cookie;

document.cookie سيتم إرجاع جميع الكوكي في سلسلة واحدة، مثل: cookie1=value; cookie2=value; cookie3=value;

تغيير الكوكي عبر JavaScript

من خلال استخدام JavaScript، يمكنك تغيير الكوكي بنفس الطريقة التي أنشأتها بها:

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

سيتم تغطية الكوكي القديم.

إزالة الكوكي عبر JavaScript

إزالة الكوكي سهلة جدًا.

لا تحتاج إلى تحديد قيمة الكوكي عند إزالته:

ببساطة expires يمكنك تعيين المعامل إلى تاريخ في الماضي فقط:

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

يجب عليك تحديد مسار الكوكي لضمان إزالة الكوكي الصحيح.

إذا لم تكن قدحددت المسار، قد لا تسمح لك بعض المتصفحات بإزالة الكوكي.

سلسلة الكوكي

document.cookie يبدو أن الخاصية مثل سلسلة نصية عادية. لكنه ليس كذلك.

حتى لو كنت تريد document.cookie كتابة سلسلة كوكي كاملة، عند القراءة مرة أخرى، يمكنك رؤية فقط اسم-قيمة.

إذا تم تعيين الكوكي الجديد، فإن الكوكي القديم لن يتم تغطيته. سيتم إضافة الكوكي الجديد إلى document.cookie، لذا إذا كنت تقرأ document.cookie، فإن ما تحصل عليه سيكون مثل هذا:

cookie1 = value; cookie2 = value;
　 　 　

إذا كنت ترغب في العثور على قيمة كوكي معين، يجب عليك كتابة دالة JavaScript لبحث قيمة الكوكي في سلسلة الكوكي.

مثال على JavaScript Cookie

في المثال التالي، سنخلق كوكي لحفظ اسم الزائر.

عند زيارة الزائر لأول مرة إلى الصفحة، سيتم طلب إدخال اسمه. ثم يتم حفظ هذا الاسم في الكوكي.

عندما يصل الزائر إلى نفس الصفحة مرة أخرى، سيتم عرض رسالة ترحيب.

على سبيل المثال، سنخلق 3 دوال JavaScript:

  1. دالة تعيين قيمة الكوكي
  2. دالة الحصول على قيمة الكوكي
  3. دالة التحقق من قيمة الكوكي

دالة تعيين الكوكي

أولاً، نخلق دالة لتحفظ اسم الزائر في متغير الكوكي:

مثال

وظيفة setCookie(cname, cvalue, exdays) {
    تعريف d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    تعريف expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

تفسير المثال:

معامل هذه الدالة هي: اسم الكوكي (cname)، قيمة الكوكي (cvalue)، وعدد الأيام التي تنتهي فيها صلاحية الكوكي (exdays).

عندما يتم إضافة اسم الكوكي، قيمة الكوكي و سلسلة انتهاء الصلاحية، يضبط هذا الدالة الكوكي.

دالة الحصول على الكوكي

ثم، نخلق دالة تعود بقيمة الكوكي المحدد:

مثال

وظيفة getCookie(cname) {
    تعريف name = cname + "=";
    تعريف decodedCookie = decodeURIComponent(document.cookie);
    تعريف ca = decodedCookie.split(';');
    للبدء (var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         إذا (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

تفسير الدالة:

استخدام الكوكي كمعامل (cname).

إنشاء متغير (name) و النص الذي سيتم البحث عنه (CNAME”=”).

تسريع سلسلة الكوكي، معالجة الكوكي الذي يحتوي على رموز خاصة مثل “$”.

استخدام نقاط العلامة لفصل document.cookie إلى مصفوفة باسم ca (decodedCookie.split(';')).

استكشاف مصفوفة ca (i = 0; i < ca.length; i++)، ثم قراءة كل قيمة c = ca[i].

إذا تم العثور على الكوكي (c.indexOf(name) == 0)، يتم العودة بالقيمة الخاصة بالكوكي (c.substring(name.length, c.length)).

إذا لم يتم العثور على الكوكي، يتم العودة بـ "".

وظيفة لتحقق من الكوكي

في النهاية، نخلق وظيفة لتحقق من تعريف الكوكي.

إذا تم تعريف الكوكي، سيتم عرض تحية.

إذا لم يتم تعريف الكوكي، سيتم عرض نافذة استعلام للطلب من المستخدم إدخال اسمه، وتخزين اسم المستخدم ككوكي لمدة 365 يومًا عن طريق setCookie وظيفة:

مثال

function checkCookie() {
    تعريف username = getCookie("username");
    إذا (username != "") {
        alert("Welcome again " + username);
    }
        username = prompt("Please enter your name:", "");
        إذا (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

الآن ندمجها

مثال

وظيفة setCookie(cname, cvalue, exdays) {
    تعريف d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    تعريف expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
وظيفة getCookie(cname) {
    تعريف name = cname + "=";
    تعريف ca = document.cookie.split(';');
    للمسلسل i = 0; i < ca.length; i++ {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        إذا (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function checkCookie() {
    var user = getCookie("username");
    إذا (user != "") {
        alert("Welcome again " + user);
    }
        user = prompt("Please enter your name:", "");
        إذا (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

تجربة شخصية

سيتم تشغيل دالة checkCookie() بعد تحميل الصفحة.