ملفات تعريف الارتباط جافا سكريبت
تتيح لك ملفات تعريف الارتباط تخزين معلومات المستخدم في صفحات الويب.
ما هي ملفات تعريف الارتباط؟
ملفات تعريف الارتباط هي بيانات مخزنة في ملفات نصية صغيرة على جهاز الكمبيوتر الخاص بك.
عندما يرسل خادم الويب صفحة ويب إلى متصفح ، يتم إيقاف الاتصال ، وينسى الخادم كل شيء عن المستخدم.
تم اختراع ملفات تعريف الارتباط لحل مشكلة "كيفية تذكر المعلومات عن المستخدم":
- عندما يزور المستخدم صفحة ويب ، يمكن تخزين اسمه / اسمها في ملف تعريف ارتباط.
- في المرة التالية التي يزور فيها المستخدم الصفحة ، "يتذكر" ملف تعريف الارتباط اسمه.
يتم حفظ ملفات تعريف الارتباط في أزواج من الاسم والقيمة مثل:
username = John Doe
عندما يطلب المستعرض صفحة ويب من خادم ، تتم إضافة ملفات تعريف الارتباط الخاصة بالصفحة إلى الطلب. بهذه الطريقة يحصل الخادم على البيانات الضرورية "لتذكر" معلومات المستخدمين.
لن يعمل أي من الأمثلة أدناه إذا كان المستعرض الخاص بك به دعم ملفات تعريف الارتباط المحلية متوقفًا عن التشغيل.
قم بإنشاء ملف تعريف ارتباط باستخدام JavaScript
يمكن لـ JavaScript إنشاء وقراءة وحذف ملفات تعريف الارتباط مع document.cookie
الخاصية.
باستخدام JavaScript ، يمكن إنشاء ملف تعريف ارتباط مثل هذا:
document.cookie = "username=John Doe";
يمكنك أيضًا إضافة تاريخ انتهاء الصلاحية (بتوقيت UTC). افتراضيًا ، يتم حذف ملف تعريف الارتباط عند إغلاق المتصفح:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
باستخدام معلمة المسار ، يمكنك إخبار المتصفح بالمسار الذي ينتمي إليه ملف تعريف الارتباط. بشكل افتراضي ، ينتمي ملف تعريف الارتباط إلى الصفحة الحالية.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
اقرأ ملف تعريف الارتباط مع JavaScript
باستخدام JavaScript ، يمكن قراءة ملفات تعريف الارتباط على النحو التالي:
let x = document.cookie;
document.cookieسيعيد جميع ملفات تعريف الارتباط في سلسلة واحدة مثل: cookie1 = value؛ ملف تعريف الارتباط 2 = القيمة ؛ ملف تعريف الارتباط 3 = القيمة ؛
قم بتغيير ملف تعريف الارتباط باستخدام JavaScript
باستخدام JavaScript ، يمكنك تغيير ملف تعريف الارتباط بنفس طريقة إنشائه:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
تمت الكتابة فوق ملف تعريف الارتباط القديم.
احذف ملف تعريف الارتباط باستخدام JavaScript
يعد حذف ملف تعريف الارتباط أمرًا بسيطًا للغاية.
لا يتعين عليك تحديد قيمة ملف تعريف الارتباط عند حذف ملف تعريف الارتباط.
ما عليك سوى تعيين معلمة انتهاء الصلاحية على تاريخ سابق:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
يجب عليك تحديد مسار ملف تعريف الارتباط للتأكد من حذف ملف تعريف الارتباط الصحيح.
لن تسمح لك بعض المتصفحات بحذف ملف تعريف الارتباط إذا لم تحدد المسار.
سلسلة ملفات تعريف الارتباط
document.cookieتبدو الخاصية كسلسلة نصية عادية . لكنها ليست كذلك.
حتى إذا قمت بكتابة سلسلة ملفات تعريف ارتباط كاملة إلى document.cookie ، فعند قراءتها مرة أخرى ، يمكنك فقط رؤية زوجها من الاسم والقيمة.
إذا قمت بتعيين ملف تعريف ارتباط جديد ، فلن تتم الكتابة فوق ملفات تعريف الارتباط القديمة. تتم إضافة ملف تعريف الارتباط الجديد إلى document.cookie ، لذلك إذا قرأت document.cookie مرة أخرى ، فستحصل على شيء مثل:
ملف تعريف الارتباط 1 = القيمة ؛ ملف تعريف الارتباط 2 = القيمة ؛
إذا كنت ترغب في العثور على قيمة ملف تعريف ارتباط محدد واحد ، فيجب عليك كتابة دالة JavaScript تبحث عن قيمة ملف تعريف الارتباط في سلسلة ملفات تعريف الارتباط.
مثال ملف تعريف ارتباط جافا سكريبت
في المثال التالي ، سننشئ ملف تعريف ارتباط يخزن اسم الزائر.
في المرة الأولى التي يصل فيها الزائر إلى صفحة الويب ، سيُطلب منه / عليها ملء اسمه / اسمها. ثم يتم تخزين الاسم في ملف تعريف الارتباط.
في المرة التالية التي يصل فيها الزائر إلى نفس الصفحة ، سوف يتلقى رسالة ترحيب.
على سبيل المثال ، سنقوم بإنشاء 3 وظائف JavaScript:
- وظيفة لتعيين قيمة ملف تعريف الارتباط
- وظيفة للحصول على قيمة ملف تعريف الارتباط
- وظيفة للتحقق من قيمة ملف تعريف الارتباط
وظيفة لتعيين ملف تعريف الارتباط
أولاً ، نقوم بإنشاء ملف functionيخزن اسم الزائر في متغير ملف تعريف الارتباط:
مثال
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
شرح المثال:
معلمات الوظيفة أعلاه هي اسم ملف تعريف الارتباط (cname) ، وقيمة ملف تعريف الارتباط (cvalue) ، وعدد الأيام حتى انتهاء صلاحية ملف تعريف الارتباط (exdays).
تقوم الوظيفة بتعيين ملف تعريف الارتباط عن طريق إضافة اسم ملف تعريف الارتباط وقيمة ملف تعريف الارتباط وسلسلة انتهاء الصلاحية معًا.
وظيفة للحصول على ملف تعريف الارتباط
بعد ذلك ، نقوم بإنشاء ملف يقوم functionبإرجاع قيمة ملف تعريف ارتباط محدد:
مثال
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
وأوضح الوظيفة:
خذ اسم ملف تعريف الارتباط كمعامل (cname).
قم بإنشاء متغير (اسم) بالنص المراد البحث عنه (cname + "=").
فك شفرة سلسلة ملفات تعريف الارتباط ، للتعامل مع ملفات تعريف الارتباط ذات الأحرف الخاصة ، مثل "$"
قم بتقسيم ملف document.cookie على فاصلة منقوطة إلى مصفوفة تسمى ca (ca = decodedCookie.split ('؛')).
قم بإجراء حلقة عبر مجموعة ca (i = 0 ؛ i <ca.length ؛ i ++) ، واقرأ كل قيمة c = ca [i]).
إذا تم العثور على ملف تعريف الارتباط (c.indexOf (الاسم) == 0) ، فقم بإرجاع قيمة ملف تعريف الارتباط (c.substring (name.length ، c.length).
إذا لم يتم العثور على ملف تعريف الارتباط ، فارجع "".
وظيفة لفحص ملف تعريف الارتباط
أخيرًا ، نقوم بإنشاء الوظيفة التي تتحقق مما إذا تم تعيين ملف تعريف الارتباط.
إذا تم تعيين ملف تعريف الارتباط ، فسيتم عرض تحية.
إذا لم يتم تعيين ملف تعريف الارتباط ، فسيعرض مربع مطالبة ، يسأل عن اسم المستخدم ، ويخزن ملف تعريف ارتباط اسم المستخدم لمدة 365 يومًا ، عن طريق استدعاء setCookieالوظيفة:
مثال
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
كلنا معا الآن
مثال
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
المثال أعلاه يشغل checkCookie()الوظيفة عند تحميل الصفحة.