❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • ما هي الكوكيز
  • كيف يتم تخزين الكوكيز
  • إستخدامات الكوكيز
  • معلومات الكوكيز
  • طريقة إنشاء كوكيز
  • طريقة تحديث الكوكيز
  • طريقة حذف الكوكيز
  • طريقة قراءة الكوكيز

ما هي الكوكيز

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

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

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

مثال

username = mhamad

معظم المتصفحات تخصص 4kb كحد أقصى لحجم الكوكيز في الطلبات التي يتم إرسالها إلى السيرفر. مما يعني أنه في حال كان حجم الكوكيز المخزنة في الملف أكبر من ذلك فإن المتصفح يجتزؤها و يرسل جزء منها إلى السيرفر.

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

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

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

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

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

الخاصية معناها
Domain إسم الموقع الخاص بالكوكيز و الذي تم إنشاؤها لأجله.
Location مسار الصفحات الموجودة في الموقع الذي يفهم هذه الكوكيز. المسار الإفتراضي هو / للإشارة إلى أن هذه الكوكيز يمكن استخدامها في جميع الصفحات.
Expires/Max-Age تاريخ صلاحية الكوكيز و الذي من خلاله يعرف المتصفح متى يجب حذفها منه و التوقف عن إرسالها للسيرفر.
Size حجم البيانات المرسلة في الكوكيز و الذي يكون بالوحدة byte.
Secure إذا كانت قيمته true فهذا يعني أنه يجب إرسال الكوكيز مع بروتوكل الإتصال الآمن HTTPS حصراً، أما إذا كانت كانت قيمته false فهذا يعني أنها ترسل مع أي بروتوكول كان سواء HTTP أو HTTPS.
HttpOnly إذا كانت قيمته true فهذا يعني أنه لا يمكن الوصول للكوكيز من خلال جافاسكربت، أما إذا كانت كانت قيمته false فهذا يعني أنه يمكن الوصل لها.
SameSite إذا كانت قيمته Strict فهذا يعني أنه يجب أن يتم إرسالها ضمن الدومين نفسه مثل harmash.com فقط. و إذا كانت قيمته Lax و هذه القيمة الإفتراضية فهذا يعني أنه سيتم إرسالها مع الدومين نفسه و أي دومين تابع له مثل static.harmash.com. و إذا كانت قيمته None فهذا يعني أنه يجب أن يتم إرسال للموقع نفسه و لأي موقع آخر.

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

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

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


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

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

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

عندما نتكلم عن الكوكيز بصيغة المفرد سنقولها كوكي (cookie) حتى يكون الشرح أدق.


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

مثال

document.cookie = 'username=Mhamad';
document.cookie = 'username=Mhamad';

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


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

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

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

مثال

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

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

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

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

المثال الأول

document.cookie = 'username=Mhamad; max-age=' + (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';
document.cookie = 'username=Mhamad; expires=Thu, 31 Dec 2030 23:59:59 UTC';

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

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

مثال

document.cookie = 'username=Mhamad; Domain=harmash.com; Path=/; Secure=true';
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);
// هنا قمنا بإنشاء كوكي صالح لغاية 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';
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;
}
}
// هنا قمنا بإنشاء الكوكي التي سيتم عرض قيمتها لاحقاً عند النقر على الزر 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; } }
جرب الكود
الدرس التالي❯ ❮الدرس السابق