مقدمة في ملفات تعريف الارتباط: فهم ملفات تعريف ارتباط JavaScript والعمل معها

Preslav Dobrev2022-10-25 · 8 min read

مقدمة في ملفات تعريف الارتباط: فهم ملفات تعريف ارتباط JavaScript والعمل معها

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

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

فلنبدأ!

المتطلبات الأساسية

لمتابعة هذا البرنامج التعليمي، يجب أن يكون لديك:

فهم أساسي لـ JavaScript.

بدء العمل مع ملفات تعريف ارتباط JavaScript

العمل مع ملفات تعريف ارتباط JavaScript أمر بسيط. فهو يتيح إنشاء ملفات تعريف الارتباط وتعديلها واستردادها دون عناء. بالإضافة إلى ذلك، يمكننا استخدام خاصية cookie الخاصة بكائن Document لتعديل وتقييد خصائص ملفات تعريف الارتباط مثل الاسم والقيمة والطول، على سبيل المثال لا الحصر.

أنواع ملفات تعريف الارتباط

أولاً، دعونا نلقي نظرة على الأنواع المختلفة لملفات تعريف الارتباط:

ملفات تعريف ارتباط الطرف الأول

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

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

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

ملفات تعريف ارتباط الجلسة

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

ملفات تعريف ارتباط الطرف الثالث

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

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

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

إرسال Set-Cookie في ترويسة استجابة HTTP. اعتمادًا على التقنيات المستخدمة لخادم الويب، يمكنك إدارة ترويسات ملفات تعريف الارتباط باستخدام الأدوات والمكتبات. يمكن أن تحتوي ملفات تعريف الارتباط على معلومات مثل تاريخ انتهاء الصلاحية وميزات الأمان مثل التوجيه الآمن وعلامة HttpOnly .

HttpOnly: تشير إلى أن المتصفح لا يمكنه قراءة أو تعديل ملفات تعريف الارتباط.
Secure: تشير إلى أنه لا يمكن إرسال ملف تعريف الارتباط إلا عبر HTTPS.

باستخدام خاصية document.cookie الخاصة بـ JavaScript، يمكننا إنشاء ملفات تعريف الارتباط وقراءتها وحذفها.

الخطوة 1 — إنشاء ملف تعريف ارتباط

بعد ذلك، سنشرح عملية إنشاء ملف تعريف ارتباط JavaScript. يتم حفظ ملفات تعريف الارتباط بتنسيق زوج الاسم والقيمة:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

في ملف تعريف الارتباط أعلاه، UserName هو اسم ملف تعريف الارتباط بينما CloudSigma هي القيمة المخزنة فيه.

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

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

بشكل افتراضي، تنتمي ملفات تعريف الارتباط إلى الصفحة الحالية. ومع ذلك، يمكننا أيضًا تحديد ملف تعريف الارتباط بمساعدة معلمة path :

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

مقارنة بين Cookie Max-Age و Cookie Expire

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

مثال على تعيين ملف تعريف ارتباط باستخدام expires و max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // بالمللي ثانية
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // بالمللي ثانية

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

الخطوة 2 — قراءة ملف تعريف الارتباط

ترجع سمة document.cookie سلسلة نصية. إذا كان هناك ملفا تعريف ارتباط أو أكثر، فإننا نستخدم الفاصلة المنقوطة ( ;) ومسافة للفصل بينهما.

نستخدم طريقة split() لاستخراج ملف تعريف ارتباط فردي من قائمة ملفات تعريف الارتباط. تقوم هذه الطريقة بتقسيم القائمة إلى أزواج فردية من الأسماء والقيم. بمجرد الانتهاء، يمكنك بعد ذلك البحث عن ملف تعريف الارتباط المستهدف الذي تريد قراءته:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("مرحباً بك مجدداً، " + UserName);
} else {
    firstName = prompt("أدخل اسم المستخدم الخاص بك:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("مرحباً بك مجدداً، " + UserName);

} else {

firstName = prompt("أدخل اسم المستخدم الخاص بك:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

دعنا نفهم الوظائف التي أنشأناها في الكود:

اسم الوظيفة	الوصف
setCookie()	إنشاء ملف تعريف ارتباط
getCookie()	قراءة قيمة ملف تعريف الارتباط
checkCookie()	التحقق مما إذا كان UserName قد تم تعيينه أم لا.

في الخطوة التالية، سنتعلم كيفية تحديث ملف تعريف الارتباط.

الخطوة 3 — تحديث ملف تعريف الارتباط

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

دعنا نحدث سمة max-age لملف تعريف الارتباط UserName من 30 يوماً إلى 180 يوماً:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

الخطوة 4 — حذف ملف تعريف الارتباط

إعادة تسمية ملف تعريف الارتباط بنفس الاسم سيؤدي إلى حذف ملف تعريف الارتباط الذي تريد مسحه. يمكننا حذف ملف تعريف الارتباط عن طريق تعيين سمة max-age إلى 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

بالإضافة إلى ذلك، إذا كان لملف تعريف الارتباط مسار محدد، فقم بحذفه عن طريق تحديده:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

الخاتمة

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

علاوة على ذلك، هناك العديد من الدروس التعليمية حول جافا سكريبت وتطوير الويب التي يمكنك استكشافها في مدونتنا:

حوسبة سعيدة!

Preslav Dobrev

المؤلف · CloudSigma

Preslav Dobrev هو مصمم إبداعي في CloudSigma، يركز على هوية أعمال متسقة باستخدام قنوات التسويق التقليدية والمبتكرة. هو بارع في دمج الرؤية الفنية مع التسويق الاستراتيجي لخلق سرد قصصي مؤثر للعلامة التجارية.