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

ما هي الكوكيز

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

كيف يتم تخزين الكوكيز

بيانات الكوكيز يتم تخزينها على جهاز المستخدم في ملفات تابعة للمتصفح نفسه و يمكن أيضاً الدخول لمجلدات المتصفح و العثور عليها.
المعلومات في هذه الملفات يتم حفظها على شكل أسماء و قيم ( Name/Values ).

إستخدامات الكوكيز

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

معلومات الكوكيز

أي كوكيز يحفظها المتصفح فإنه يحفظ معها بعض المعلومات الأخرى و أهمها ما يلي.

رؤية كوكيز المتصفح

لرؤية ملفات الكوكيز الخاصة بموقع هرمش في متصفح كروم، يمكنك النقر على F12 و من ثم التوجه للتبويب Application، يليه القسم Storage، يليه النقر على إسم الموقع من القائمة Cookies كما يظهر في الصورة التالية.

طريقة إنشاء كوكيز

بدايةَ، من خلال الكائن document.cookie يمكنك إنشاء، تحديث أو حذف الكوكيز.

في المثال التالي قمنا بإنشاء كوكي جديد إسمه 'username' و قيمته 'Mhamad'.

document.cookie = 'username=Mhamad';

ترميز قيمة الكوكي

إذا كانت قيمة الكوكي ستحتوي على مسافة فارغة، فاصلة أو فاصلة منقوطة فإنه يجب ترميزها بواسطة الدالة encodeURIComponent() حتى لا تسبب أي مشكلة عند محاولة قراءتها لاحقاً.

في المثال التالي قمنا بإنشاء كوكي قيمته فيها مسافة فارغة و لكننا قمنا بترميزها.

document.cookie = 'username=' + encodeURIComponent('Mhamad Harmush');

تحديد مدة بقاء الكوكي

إذا لم يتم تحديد عمر الكوكي أو تاريخ إنتهاء صلاحيتها فإن المتصفح سيقوم بحذفها بمجرد الخروج من المتصفح.

في المثال التالي قمنا بتحديد كم هو عمر الكوكي بالثواني، و جعلناه شهر واحداً.
معلومة: عدد الثواني الموجودة في شهر واحد = 60 ثانية × 60 دقيقة × 24 ساعة × 30 يوم.

document.cookie = 'username=Mhamad; max-age=' + (60*60*24*30);

في المثال التالي قمنا بتحديد تاريخ إنتهاء صلاحية الكوكي.
ملاحظة: التاريخ يمكن تحديده بأسلوب UTC أو GMT و المسافات الفارغة و الفواصل الموضوعة فيه متوقع أن تكون فيه لهذا لا يجب ترميزها.

document.cookie = 'username=Mhamad; expires=Thu, 31 Dec 2030 23:59:59 UTC';

تحديد درجة أمان الكوكي

في المثال التالي حددنا إسم الدومين و المسار الذي يجب أن يتم فيه إرسال الكوكيز (جعلناه في كل الصفحات) مع الإشارة إلى أنه يجب إرسالها مع البروتوكول HTTPS حصراً.

document.cookie = 'username=Mhamad; Domain=harmash.com; Path=/; Secure=true';

طريقة تحديث الكوكيز

تحديث الكوكي يتم من خلال تعريف كوكي جديد بنفس الإسم و لنفس الدومين و من ثم يتم تمرير المعلومات الأخرى التي تريد تحديثها فيه.

في المثال التالي قمنا بتحديث عمر الكوكي الذي يملك 'username=Mhamad' و 'domain=hamrash.com'.

// هنا قمنا بإنشاء كوكي صالح لغاية 30 يوم
document.cookie = 'username=Mhamad; domain=harmash.com; max-age=' + (60*60*24*30);

// هنا قمنا بتحديث الكوكي و جعلناه صالح لمدة 365 يوم
document.cookie = 'username=Mhamad; domain=harmash.com; max-age=' + (60*60*24*365);

طريقة حذف الكوكيز

حذف الكوكي يتم من خلال تحديث الكوكي و جعل عمره يساوي 0 أو نضع تاريخ قديم كتارخ صلاحيته.

في المثال التالي قمنا بتحديث عمر الكوكي إلى 0 حتى يتم حذفه.

document.cookie = 'username=Mhamad; domain=harmash.com; max-age=0';

طريقة قراءة الكوكيز

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

لذلك فإن أسهل الطريقة التي يمكنك اتباعها لقراءة معلومات كوكي معين، هي أن يتم تجزيء النص الذي يحتوي جميع الكوكيز النص أولاً على أساس الفاصلة المنقوطة ; حتى يصبج كل كوكي في عنصر لوحده في مصفوفة، و من بعدها نمر على كل عنصر في هذه المصفوفة و نقوم بتجزئته على أساس رمز المساوات =، و عندها يمكننا معرفة إسم العنصر و قيمته و حتى باقي القيم الأخرى إن أردنا ذلك.

في المثال التالي قمنا بإنشاء كوكي مع تعيين إسمها و قيمتها 'username=Mhamad Harmush'.
بعدها قمنا بتعريف دالة إسمها getCookieValue() مهمتها البحث في الكوكيز عن الإسم 'username' و من ثم إرجاع قيمته حين تجدها.
ثم قمنا بتعريف دالة أخرى إسمها printCookieValue() مهمتها استدعاء الدالة getCookieValue() و طباعة نتيجة البحث التي أرجعتها لها في عنصر موجود في الصفحة.

// هنا قمنا بإنشاء الكوكي التي سيتم عرض قيمتها لاحقاً عند النقر على الزر
document.cookie = 'username=' + encodeURIComponent('Mhamad Harmush');

// name فيها باراميتر واحد إسمه getCookieValue هنا قمنا بتعريف دالة إسمها
function getCookieValue(name) {
    // هنا قمنا بتجزيء النص الذي فيه جميع الكوكيز إلى مصفوفة على أساس الفاصلة المنقوطة
    let cookieArr = document.cookie.split(";");

    // هنا مررنا على جميع عناصر المصفوفة
    for(let i = 0; i < cookieArr.length; i++) {
        // هنا قمنا بتقسيم كل إسم و قيمة في عناصر هذه المصفوفة على أساس رمز المساوات
        let cookiePair = cookieArr[i].split("=");

        // هنا قمنا بإزالة أي مسافة فارغة موجودة على أطراف نص العنصر
        // ثم قمنا بمقارنتها مع العنصر نفسه حتى نرجعها و نخرج من الدالة
        // إذا كانت متطابقة مع قيمة العنصر لأن ذلك سيعني أننا وجدناها
        if(name == cookiePair[0].trim()) {
            // هنا قمنا بفك ترميز القيمة التي سيتم إرجاعها لإعادة كما كانت
            return decodeURIComponent(cookiePair[1]);
        }
    }

    // إن لم يتم إيجاد إسم القيمة في المتصفح null هنا سيتم إرجاع القيمة
    return null;
}

// printCookieValue هنا قمنا بتعريف دالة إسمها
function printCookieValue() {
    // لها 'username' مع تمرير القيمة getCookieValue() هنا سيتم إستدعاء الدالة
    // cookieValue القيمة التي سترجعها سيتم تخزينها في المتغير 
    let cookieValue = getCookieValue('username');
    
    // فهذا يعني أنه لم يتم العثور على null تساوي cookieValue إذا كانت قيمة 
    // result يساوي id الكوكي لذا سيتم عرض النص التالي في العنصر الذي يملك 
    if (cookieValue == null) {
        document.querySelector('#result').innerHTML = 'Cookie not found!';
    }
    // result يساوي id إذا لم تكن قيمته كذلك سيتم عرض قيمة الكوكي في العنصر الذي يملك
    else {
        document.querySelector('#result').innerHTML = 'username = ' + cookieValue;
    }
}