الكوكيز (Cookie) في JavaScript

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

ما هو الكوكي؟

الكوكي هو ملف نصي صغير يسمح لك بتخزين بيانات صغيرة على جهاز المستخدم (حوالي 4 كيلوبايت).

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

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

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

يتم حفظ الكوكي على شكل زوج "الاسم=القيمة"، مثل:

username = Seagull

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

إنشاء كوكي باستخدام جافا سكريبت

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

يمكنك إنشاء كوكي مثل هذا:

　　document.cookie = "username=Seagull";

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

باستخدام parameter path، يمكنك إخبار المتصفح عن ما إذا كان Cookie ينتمي إلى هذا المسار. بشكل افتراضي، ينتمي Cookie إلى الصفحة الحالية:

　　document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

استخدام JavaScript لقراءة Cookie

في JavaScript، يمكنك قراءة Cookie بهذه الطريقة:

　　var x = document.cookie;

قراءة Cookie معقدة بعض الشيء، لأنdocument.cookieالخصائص تعود ببساطة سلسلة تحتوي على قائمة مفصولة بالفواصل العريضة وتحتوي على جميع cookies (مثل name=value; cookie1=value; cookie2=value; cookie3=value). للحصول على Cookie فردي من هذه القائمة، تحتاج إلى استخدامsplit()الطريقة لقسمنها إلى اسم = قيمة زوج، و البحث عن الاسم المحدد.

هذه السلسلة لا تحتوي على خصائص مثل expires،path،domain،إلخ، قد تكون بالفعل جزءًا من مجموعة Cookie.

استخدام JavaScript لتغيير Cookie

الطريقة الوحيدة لتغيير أو تعديل Cookie هي إنشاء Cookie يحمل نفس الاسم وpath مثل الذي موجود بالفعل.

　　document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

ملاحظة:إنشاء Cookie يحمل نفس الاسم ولكن path مختلف لن يغير Cookie الحالية، بل سيضيف Cookie إضافية.

استخدام JavaScript لإزالة Cookie

إزالة Cookie سهلة للغاية. إزالة Cookie:

• بإعادة استخدام نفس الإعدادname، قم بتحديد قيمة فارغة

• أو قم بتعيين 参数expires إلى تاريخ مرور

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

تذكر،إذا كانpath الخاص بك هوcookie أو أي خصائص أخرى،则需要包括它们 عند إزالة.

مثال على JavaScript Cookie

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

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

عندما يعود المستخدم إلى نفس الصفحة مرة أخرى، سيحصل على القيمة المحفوظة في الكوكي.

للإشارة، سنخلق 2 دالة JavaScript:

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

• دالة الحصول على قيمة الكوكي

تخزين الكوكي

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

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth() + 1);
　　var expires = "expires="+ now.toUTCString();
　　document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

شرح الوظيفة:

معامل الدالة المذكورة أعلاه هو اسم الكوكي (cname) وقيمة الكوكي (cvalue).

تقوم هذه الدالة بتعيين الكوكي من خلال جمع اسم الكوكي، قيمة الكوكي وSTRING expires (شهر واحد).

قراءة الكوكي

ثم، نخلق دالة عرض قيمة الكوكيز المحددة.

function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　document.write("مفتاح هو: " + cookiePair[0] + " و القيمة هي: " + cookiePair[1]);
　　　　　}
　　}
}

شرح الدالة:

هذه الدالة تأخذ اسم الكوكيز كمعامل (cname).

الحصول على جميع الكوكي (allcookies = document.cookie).

قسم document.cookie على نقاط السطر إلى مصفوفة تسمى cookieArr (cookieArr = allcookies.split（';'）).

استدعاء دالة الحلقة (i = 0; i <cookieArr.length; i ++)، واستخراج كل قيمة (cookiePair = cookieArr [i]).

إذا تم العثور على الكوكيز (cname == cookiePair [0])، يتم كتابة مفتاح الكوكيز وقيمته (cookiePair [0]，cookiePair [1]).

الجمع بينها

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth() + 1);
　　var expires = "expires="+ now.toUTCString();
　　document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split("=");
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　　　　document.write("مفتاح هو: " + cookiePair[0] + " و القيمة هي: " + cookiePair[1]);
　　　　　}
　　}
}

خصائص الكوكي

الكوكي هو سجل نصي بسيط يحتوي على خمس خصائص: