الكوكيز Cookies

تستخدم الكوكيز cookie لتحديد هوية المستخدم .


ماهو الكوكي cookie

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

أمثلة عن الكوكيز :

  • اسم الكوكي cookie : عند تسجيل الدخول على موقع الفايس بوك مثلاً فإن الموقع سيرسل كوكيز لحاسوبك وعند تسجيل الدخول مرة أخرى تشاهد أن المتصفح قد حفظ الاسم الخاص بك وكلمة المرور ويمكنك تسجيل الدخول فوراً بدون كتابة اسم المستخدم و كلمة المرور مرة أخرى .
  • تاريخ الكوكي cookie : عند دخولك لموقع معين فإن ملف الكوكي سيحفظ التاريخ الحالي لدخول الصفحة وعند الدخول مرة أخرى سيرسل لك رسالة بأن آخر دخول للموقع هو بتاريخ ” الثلاثاء 10 آب , 2010 ” حيث سيتم استدعاء ملف الكوكيز من حاسوبك عند الدخول مرة أخرى .

إنشاء و تخزين الكوكيز Cookies

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

سنقوم بإنشاء كود وظيفي بحيث يخزن اسم المستخدم في متغير كوكيز :

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
 

البارامتر في الكود الوظيفي يحمل اسم الكوكي و القيمة و عدد الأيام حتى انتهاء تاريخه .

في الكود الوظيفي قمنا بتحويل عدد أيام الى تاريخ فعال ثم قمنا بإضافة عدد الأيام حتى انتهاء تاريخ الوكي . بعد ذلك قمنا بتخزين اسم الكوكي و قيمة الكوكي و تاريخ الانتهاء في الكائن document.cookie .

ثم نقوم بإنشاء كود وظيفي آخر ليعيد الكوكي المحدد :

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^s+|s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
 

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

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

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("مرحباً بك مجدداً " + username);
}
else
{
username=prompt("الرجاء أدخل اسمك :","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}
 

و الآن عند جمع جميع الأمثلة معاً سيصبح لدينا المثال التالي :

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

<html>
<head>
<script type="text/javascript">

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^s+|s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
{
alert("مرحباً بك مجدداً " + username);
}
else
{
username=prompt("الرجاء أدخل اسمك : ","");
if (username!=null && username!="")
{
setCookie("username",username,365);
}
}
}

</script>
</head>

<body onload="checkCookie()">

</body>
</html>