عمر ملف تعريف الارتباط Jquery. أهم ملحقات jQuery

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

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

انتباه! ليس لديك الإذن لعرض النص المخفي.

أساس الوثيقة

للبدء، سنقوم بإنشاء مستند HTML5 نموذجي مع مرجع واحد لمكتبة jQuery، بالإضافة إلى وظيفة ملفات تعريف الارتباط jQuery. يمكنك تنزيلها مباشرة، والملف الوحيد الذي سنحتاجه هو jquery.cookie.js.

إدارة ملفات تعريف الارتباط باستخدام jQuery - العرض التجريبي المباشر







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

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

محتوى العنصر الداخلي

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

إدارة ملفات تعريف الارتباط الأساسية

قم بتسجيل الدخول إلى الحساب التجريبي باستخدام اسم المستخدم/كلمة المرور التالية: demo/demo

اسم المستخدم:

كلمة المرور:

لقد قمت بتسجيل الدخول كعرض توضيحي! تم تعيين ملف تعريف الارتباط على أن تنتهي صلاحيته خلال يوم واحد من تسجيل الدخول الأصلي.

هل تريد تسجيل الخروج؟ سهل!

تسجيل الخروج الآن

ربما لاحظت أنه في HTML بعد نموذج تسجيل الدخول، يوجد div آخر بالمعرف #logindetails. لقد قمنا بإخفائها باستخدام أنماط CSS، لأننا نحتاج إلى عرضها للمستخدم فقط إذا قام بتسجيل الدخول. HTML الداخلي ثابت ويعرض دائمًا اسم المستخدم التجريبي. ولكن عند العمل مع قاعدة بيانات، يمكنك تحديث هذه المعلمة إلى أي اسم مستخدم باستخدام جافا سكريبت.

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

/** عناصر النموذج **/
تسمية النموذج (حجم الخط: 1.1em؛ ارتفاع الخط: 1.25em؛ سمك الخط: غامق؛ الهامش السفلي: 5px؛)

نموذج الإدخال الأساسي (
العرض محجوب؛
الخطوط العريضة: لا شيء؛
حجم الخط: 1.5em؛
اللون: #525252؛
العرض: 300 بكسل؛
الحشو: 10 بكسل 8 بكسل 10 بكسل 8 بكسل؛
الهامش السفلي: 7 بكسل؛
الحدود: 1 بكسل صلب #888؛
نصف قطر الحدود: 5 بكسل؛
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow: داخلي 0 1px 2px rgba(0,0,0,0.4);
صندوق الظل: داخلي 0 1px 2px rgba(0,0,0,0.4);
}

#تفاصيل تسجيل الدخول (
عرض لا شيء؛
}
لقد تغيرنا أيضًا العناصر القياسيةالإدخال بحيث يتناسب بشكل أفضل مع الصفحة. يتم تمييز حاوية تفاصيل تسجيل الدخول بخاصية العرض: لا شيء، لذلك لن تشغل أي مساحة على الصفحة التي تم إنشاؤها. ومع ذلك، فإنه لا يزال يشكل الجزء النشط من DOM، مما يعني أنه يمكننا التعامل مع قيمة العرض باستخدام jQuery. الآن دعونا نلقي نظرة على كود jQuery هذا الموجود في أسفل الصفحة، قبل علامة الإغلاق مباشرة.

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

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

$(وظيفة())(
إذا($.cookie("اسم المستخدم")) (
$("#loginform").hide();
$("#logindetails").show();
}
ولا شك أن هناك المزيد طرق جيدةإدارة هذا النموذج باستخدام لغات الواجهة الداخلية، ولكن في العرض التوضيحي الخاص بنا، يقوم jQuery بعمل رائع. من خلال تشغيل عبارة if مقابل $.cookie('username')، فإننا نتحقق لمعرفة ما إذا كان ملف تعريف الارتباط "اسم المستخدم" موجودًا. إذا كانت الإجابة بنعم، فإننا نعلم أن المستخدم قد قام حاليًا بتسجيل الدخول إلى حسابه، لذلك نقوم بإخفاء نموذج التفويض وإظهار معلومات تسجيل الدخول. وبخلاف ذلك، لن يحدث شيء ونرى فقط صفحة تحتوي على نموذج تسجيل الدخول.

$("#loginform").submit(function(e)(
e.preventDefault();
var inputuname = $("#username").val();
فار inputpass = $("#password").val();

إذا (inputuname == "demo" && inputpass == "demo") (
// تم التحقق بنجاح وإنشاء ملف تعريف الارتباط
$.cookie("اسم المستخدم", "demo", ( انتهاء الصلاحية: 1 ));
فار Currentusr = $.cookie("اسم المستخدم");
window.location.reload();
}
});

$("#logoutbtn").on("انقر"، وظيفة(e)(
e.preventDefault();
إذا($.removeCookie("اسم المستخدم")) (
$("#logoutcontainer").html("تم تسجيل الخروج بنجاح! جارٍ تحديث الصفحة الآن...");
window.setTimeout("location.reload()", 2000); // التحديث بعد ثانيتين
}
});
});
لقد قمنا بدمج هاتين الوظيفتين في كتلة واحدةالكود، لأنهما متشابهان جدًا مع بعضهما البعض. بمجرد أن يحاول المستخدم تسجيل الدخول إلى الحساب، نتحقق مما إذا كان اسم المستخدم/كلمة المرور يتطابقان مع "demo". إذا كانت الإجابة بنعم، فسنقوم بتشغيل $.cookie('username', 'demo', (expires: 1 )); والذي يتضمن عدة خيارات.

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

المجموعة الثانية من التعليمات البرمجية تتتبع نقرات المستخدم على الرابط #logoutbtn. من الواضح أن رابط تسجيل الخروج لن يتم عرضه إلا إذا كان المستخدم قد قام بتسجيل الدخول حاليًا. ستقوم هذه الوظيفة بإنهاء الجلسة عن طريق تشغيل $.removeCookie('username') داخل عبارة if. لذا، إذا تمكنا من إزالة ملف تعريف الارتباط، فسنحتاج إلى إزالة زر تسجيل الخروج وإظهار رسالة نجاح وتقديم نموذج تسجيل الدخول.

ختاماً

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

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

لنتخيل أن لديك فرصة الاختيار على موقع الويب الخاص بك نظام الألوانموقع. من السهل جدًا تنفيذ ذلك على ملفات تعريف الارتباط، نظرًا لأن الموضوع الذي يختاره سيكون مرئيًا له فقط.

توجد ملفات تعريف الارتباط في كل من PHP وjQuery. لذلك، سننظر في كل حالة بمزيد من التفصيل.

تعليمات مفصلة للعمل مع ملفات تعريف الارتباط في jQuery

1. إعداد ملفات تعريف الارتباط

يمكننا الآن محاولة إنشاء ملف تعريف الارتباط الأول الخاص بنا:

$.cookie("cookie_name"، "cookie_value"، ( تنتهي الصلاحية: 3، المسار: "/"، المجال: "your_site.ru"، آمن: صحيح ));

ما هو هنا؟

"اسم ملف تعريف الارتباط" - اسم ملف تعريف الارتباط؛

"قيمة ملف تعريف الارتباط" - قيمة ملف تعريف الارتباط؛

"انتهاء الصلاحية" - عدد الأيام التي سيتم فيها تخزين ملفات تعريف الارتباط (في حالتنا - 3 أيام). بعد هذا الوقت سيحدث الإزالة التلقائيةبسكويت؛

"المسار" - توفر ملفات تعريف الارتباط على الموقع (في حالتنا "/" - متاح على الموقع بأكمله). إذا رغبت في ذلك، يمكنك تعيين فقط صفحة محددةأو القسم الذي سيتوفر فيه ملف تعريف الارتباط، على سبيل المثال، "/audio/rock"؛

"المجال" - المجال الذي يكون ملف تعريف الارتباط صالحًا عليه. إذا كان لديك مجال فرعي، فيمكنك تحديده في هذه المعلمة، على سبيل المثال، "المجال: "subdomain.your_site.ru""، وفي هذه الحالة سيكون ملف تعريف الارتباط متاحًا فقط على المجال "subdomain.your_site.ru"؛

"آمن" - معلمة تشير إلى أنه يجب إرسال ملف تعريف الارتباط بشكل آمن بروتوكول https.

ليست كل المعلمات مطلوبة هنا، ومن أجل تعيين ملفات تعريف الارتباط، سيكون هذا البناء كافيًا:

$.cookie("cookie_name"، "cookie_value"، ( تنتهي الصلاحية: 3، المسار: "/" ));

2. استلام ملف تعريف الارتباط

يعد الحصول على ملفات تعريف الارتباط أمرًا بسيطًا للغاية، ويمكنك القيام بذلك باستخدام الكود:

$.cookie("cookie_name");

هذا الرمزيمكن تعيينه لمتغير واستخدامه لاحتياجاتك:

محتوى var = $.cookie("cookie_name"); if(content != null) ( تنبيه("ملف تعريف الارتباط موجود!"); ) else ( تنبيه("ملف تعريف الارتباط غير موجود!"); )

أوافق، هذا مريح للغاية.

3. إزالة ملفات تعريف الارتباط

لإزالة قيمة ملف تعريف الارتباط، اضبطها على "فارغة":

$.cookie("cookie_name", null);

أعتقد أن هذه هي نهاية مقدمة العمل مع ملفات تعريف الارتباط في jQuery. هذه المعرفة كافية لتنفيذ أفكارك.

تعليمات مفصلة للعمل مع ملفات تعريف الارتباط في PHP

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

1. إعداد ملفات تعريف الارتباط

لتعيين ملفات تعريف الارتباط في PHP، سنستخدم وظيفة "setcookie" المضمنة:

ما هو هنا؟

"اسم ملف تعريف الارتباط" - اسم ملف تعريف الارتباط؛

"قيمة ملف تعريف الارتباط" - قيمة ملف تعريف الارتباط؛

"time()+3600" - عمر ملف تعريف الارتباط بالثواني (في حالتنا - ساعة واحدة). إذا قمت بتعيين مدى الحياة على "0"، فسيتم حذف ملف تعريف الارتباط بمجرد إغلاق المتصفح؛

"/" - القسم الذي تتوفر فيه ملفات تعريف الارتباط (في حالتنا، متوفرة في جميع أنحاء الموقع). إذا كنت تريد تحديد القسم الذي ستتوفر فيه ملفات تعريف الارتباط، فاستبدل "/" بـ "/ audio/rock" على سبيل المثال؛

“your_site.ru” – المجال الذي سيكون ملف تعريف الارتباط متاحًا عليه؛

"صحيح" - معلمة تشير إلى أن ملف تعريف الارتباط متاح فقط عبر بروتوكول https الآمن. وإلا فإن القيمة خاطئة.

"خطأ" - معلمة تشير إلى أن ملف تعريف الارتباط متاح لغات البرمجة النصية. خلاف ذلك – صحيح (متوفر فقط عبر http).

هنا أيضًا ليست كل المعلمات مطلوبة، ولإنشاء ملفات تعريف الارتباط ستحتاج فقط إلى البناء التالي:

للراحة، يمكن تعيين قيمة ملف تعريف الارتباط عبر متغير:

2. استلام ملف تعريف الارتباط

لتلقي ملفات تعريف الارتباط، تحتاج إلى استخدام:

$_COOKIE["cookie_name"];

لمنع حدوث الأخطاء بسبب غياب محتململفات تعريف الارتباط، استخدم:

كما في المثال السابق للعمل مع ملفات تعريف الارتباط في jQuery، يمكن تعيين ملفات تعريف الارتباط لمتغير:

3. إزالة ملفات تعريف الارتباط

تعد إزالة ملفات تعريف الارتباط في PHP بنفس السهولة كما هو الحال في jQuery. كل ما عليك فعله هو ضبط ملف تعريف الارتباط على قيمة فارغة ووقت سالب (الوقت الذي مضى بالفعل):

Setcookie("cookie_name", ", time() - 3600);

حان الوقت في هذا المثاليساوي ساعة مضت، وهو ما يكفي لحذف ملفات تعريف الارتباط.

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

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

المكتبة المسؤولة عن العمل مع ملفات تعريف الارتباط تسمى jquery.cookie.js. يمكنك تنزيله مع مثال عملي أدناه. يتطلب هذا البرنامج المساعد التثبيت مكتبات مسج، على سبيل المثال، النسخة سوف تفعل 1.9.1.

معلمات البرنامج المساعد jquery.cookie.js:

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

المسار - يمكن أن تعمل ملفات تعريف الارتباط على الموقع بأكمله (/) وعلى دليل محدد (/my/file/).

المجال - المجال الذي سيتم إنشاء ملف تعريف الارتباط عليه (الحالي افتراضيًا)

آمن - إذا تم التعيين على "صحيح"، فسيتم إرسال ملفات تعريف الارتباط المثبتة إلى الخادم فقط عبر بروتوكول https (خطأ افتراضيًا)

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

ضبط ملفات تعريف الارتباط على الموقع

للقيام بذلك، اكتب: $.cookie("cookie_name1"، "قيمة ملف تعريف الارتباط 1")؛ من هذا المثال، سنقوم بتعيين المتغير cookie_name1 على القيمة التي نحتاج إلى تذكرها. وأيضًا، نظرًا لعدم تحديد وقت التخزين هنا، فسيتم حذف ملف تعريف الارتباط بعد إغلاق المتصفح.

مثال على ملف تعريف الارتباط الصالح على الموقع بأكمله لمدة 5 أيام
$.cookie("cookie_name2"، "قيمة ملف تعريف الارتباط 2"، (تنتهي الصلاحية: 5، المسار: "/"));

مثال على ملف تعريف الارتباط الكامل الذي، من بين أمور أخرى، يعمل على مجال معين وينقل البيانات فقط عبر https:
$.cookie("cookie_name"، "قيمة ملف تعريف الارتباط 3"، (تنتهي الصلاحية: 5، المسار: "/"، المجال: "site"، آمن: صحيح)); ));

الحصول على قيمة ملف تعريف الارتباط
يعد الحصول على ملف تعريف ارتباط محدد أمرًا بسيطًا للغاية، فكر في المثال أدناه - سيعرض رسالة حول القيمة المحددة.
اختبار var = $.cookie("cookie_name1"); تنبيه (اختبار)؛

كيفية التحقق من تعيين ملف تعريف الارتباط على الموقع
للقيام بذلك، عليك استخدام شرط if
if($.cookie("cookie_name1")) تنبيه(اختبار);

إزالة ملفات تعريف الارتباط
تؤدي هذه العملية إلى مسح قيمة ملف تعريف الارتباط إلى الصفر.
$.cookie("cookie_name2", null);

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