ما هي الكوكيز وكيفية العمل معها باستخدام JavaScript

? ? ? ليس بالضبط… ??? أفضل! الكوكي ? هو واحد من الرموز التعبيرية المفضلة على الويب وهو أيضًا واحد من أهم التقنيات على الويب.

لنلقِ نظرة على ما يتعلق الأمر به، هل نبدأ؟

أساسيات الكوكيز في المتصفح

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

الكوكيز عبارة عن سلاسل تحتوي على حقل اسم وحقل قيمة وسمات اختيارية إضافية. القيم هي سلاسل ويمكنك تخزين ما تراه أفضل لتطبيقك. ربما يكون كوكي Google Analytics’ _ga هو واحد من أحد || ال الكوكيز الأكثر شيوعًا هناك، وعادة ما يبدو مثل هذا:

• الاسم: _ga
• القيمة: GA1.3.210706468.1583989741
• النطاق: .example.com
• المسار: /
• تنتهي / الحد الأقصى للعمر: 2022-03-12T05:12:53.000Z

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

كيف يتم إنشاء ملفات تعريف الارتباط

هناك طريقتان رئيسيتان لإنشاء ملفات تعريف الارتباط:

• مع HTTP يمكنك إرسال Set-Cookie في رأس الاستجابة HTTP الخاصة بك. اعتمادًا على التقنيات التي تستخدمها لخادم الويب الخاص بك؛ يمكنك استخدام أدوات ومكتبات مختلفة لإدارة رؤوس ملفات تعريف الارتباط. يجب أن تنشئ هذه الأدوات استجابات HTTP ستبدو تقريبًا مثل هذا:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

يمكنك إضافة معلومات إلى ملفات تعريف الارتباط الخاصة بك مثل تاريخ انتهاء الصلاحية، وميزات الأمان مثل التوجيه الآمن والعلم النشط لـ Secure و HttpOnly.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

علم الـ HttpOnly يعني أنه لا يمكن قراءة أو تعديل ملفات تعريف الارتباط بواسطة المتصفح. ويعني التوجيه الآمن أنه يمكن نقل ملف تعريف الارتباط فقط عبر HTTPS. هذه أمور مهمة لحماية تطبيقك.

• مع Javascript من المعقد قليلا إدارة ملفات تعريف الارتباط. لدينا واجهة واحدة، document.cookie، التي تخزن ملفات تعريف الارتباط الخاصة بنا ويمكن إعادة تعيينها. على سبيل المثال في موقع به Google Analytics مثبت، وفي وحدة التحكم للمطور، يمكننا أن نفعل:

console.log(document.cookie)
// يسجل شيئًا مثل "_ga=GA1.3.210706468.1583989741؛ _gid=GA1.3.1734708005.1583989741"

// هذا الرمز يساوي لا يعمل كما تتوقع
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// يسجل "_ga=GA1.3.210706468.1583989741؛ _gid=GA1.3.1734708005.1583989741؛ التمساح=محتوى_كوكي_التمساح"
// لاحظ أن الجزء السابق من الكود يلحق الكوكي الجديدة التي أنشأناها

// يمكن أن يبدو تنفيذ تمثيل خشن لواجهة الكوكي مثل هذا:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// بالنسبة لتحديث حقيقي ، سنتحقق أولاً مما إذا كان الكوكي موجودًا
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

أنواع الكوكيز

كوكيز الجلسة

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

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

ملف تعريف ارتباط دائم

الملفات التعريفية الدائمة لا تُحذف من قبل المتصفح عند إغلاق المستخدم له. تحتوي هذه الملفات التعريفية على تاريخ انتهاء يمكنك تعيينه على خادمك. يمكنك تعيين ملف تعريف ارتباط لينتهي في يوم واحد أو عشر سنوات.

ملف تعريف ارتباط من جهة ثالثة

يمكننا التمييز بين ملفات تعريف الارتباط التي تكون على نفس النطاق من ملفات تعريف الارتباط التي تأتي من مزودين من جهة ثالثة. المثال الذي قدمناه سابقًا مع Google Analytics هو مثال على ملف تعريف ارتباط من جهة ثالثة. يمكن استخدام ملفات تعريف الارتباط من جهة ثالثة لتتبع أنشطة المستخدمين. لتعيين ملف تعريف ارتباط من جهة ثالثة ، يجب عليك تعيين ';domain=thirdpartydomain.com'.

مدة الصلاحية مقابل الانتهاء لملف تعريف الارتباط

عادةً ما تكون ملفات تعريف الارتباط مؤقتة ، لذا قد ترغب في تعيين تاريخ انتهاء دقيق. لديك استراتيجيتان:

• استخدم Expires وقم بتعيين تاريخ انتهاء ثابت. يستخدم التاريخ النموذجي لـ HTTP التالي: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT. لذا على سبيل المثال، إذا أردنا أن تنتهي صلاحية الكوكي في 17 سبتمبر 2020، يمكننا القيام بالتالي:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• استخدام ‘Max-Age’ لا يتم دعمه من قبل كل متصفح. ولكنه الحل الأكثر سلامة. فهو يجبر الكوكي على الانتهاء بعد مرور مدة معينة (بالثواني) بعد استلام العميل له:

// ينتهي بعد يوم واحد
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? هذا كل شيء! آمل أن يكون لديك الآن فكرة أفضل عن كيفية استخدام الكوكيز على الجانب العميلي مع JavaScript. إذا كان لديك أي سؤال، فاسألنا على تويتر. في المرة القادمة، سنرى كيفية إدارة الجلسات باستخدام الكوكيز و Express.js.