JavaScript Cookies
في هذا الدرس سوف نتعرف علي ال cookies ملفات تعريف الارتباط وهي عبارة عن ملفات صغيره تحمل بعض المعلومات عن المستخدم وتقوم بتخزينها حتي يتم استخدامها عند دخول المستخدم مره اخري علي الموقع دون الحاجة الي كتابة نفس المعلومات مره اخري
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript Cookies chevron_left JavaScript
JavaScript Cookies
</> JavaScript Cookies
- تتيح لك ملفات تعريف الارتباط تخزين معلومات المستخدم في صفحات الويب.
ملفات تعريف الارتباط Cookies هي عبارة عن بيانات مخزنة في ملفات نصية صغيرة على جهاز الكمبيوتر الخاص بك. عندما يقوم المستخدم بالخروج من موقع الويب الخاص بك , يتم نسيان جميع المعلومات الخاصة به التي تم جمعها وتم انشاء ال cookies لحل هذه المشكلة دون الحاجة الي اعادة اخذ البيانات من المستخدم مره اخري عن طريق تخزين هذه البيانات في ملفات نصية
- عندما يقوم المستخدم بزيارة صفحة ويب معينة يتم تخزين اسمه بداخل ملفات ال cookies
- عندما يقوم المستخدم بزيارة نفس الصفحة مره اخري فهو ليس بحاجة الي اعادة كتابة اسمه لأنها يتم استدعائها من ملفات ال cookies
يتم تخزين البيانات في ملفات تعريف الارتباط علي الشكل التالي
username = Mohamed Ahmed
عندما يطلب Request المتصفح صفحة ويب من خادم ، تتم إضافة ملفات تعريف الارتباط الخاصة بالصفحة إلى الطلب. بهذه الطريقة يحصل الخادم على البيانات الضرورية "لتذكر" معلومات المستخدمين.
</> Create a Cookie with JavaScript
لغة الجافا سكريبت يمكنها التعامل مع ملفات تعريف الارتباط حيث انك تستطيع من خلالها انشاء ملفات cookies , قراءة البيانات من ملفات ال cookies , حذف ملفات ال cookies , ويمكنك انشاء ملفات تعريف الارتباط cookies عن طريق خاصية تسمي " document.cookies "
document.cookie = "username=Mohamed Ahmed ";
يمكنك ايضا تحديد مدة صلاحية هذه الملفات والتاريخ الذي يتم حذفها بعده
document.cookie = "username=Mohamed Ahmed ; expires=Sat , 16 Nov, 2021 12:00:00 UTC";
يمكنك ايضا تحديد المسار التي تريد تواجد ملفات ال cookies من خلال ال parameter الذي يسمي " path " والقيمة الافتراضية لملفات ال cookies يتم حفظها في نفس مسار صفحة الويب
document.cookie = "username=Mohamed Ahmed ; expires=Sat , 16 Nov, 2021 12:00:00 UTC; path=/";
</> Read a Cookie with JavaScript
يمكنك قراءة البيانات من ملفات ال cookies كالتالي
ففي هذا المثال قمنا بتخزين البيانات التي تم جمعها بواسطة ال cookies بداخل متغير variable ومن ثم نستطيع عرض هذه البيانات في أي وقت
let x = document.cookie;
الخاصية "document.cookie " تقوم بأرسال جميع البيانات متتالية كالتالي : cookie1=value; cookie2=value; cookie3=value;
</> Change a Cookie with JavaScript
يمكنك التعديل علي البيانات الموجودة بداخل ملفات ال cookies عن طريق انشاء واحده جديدة بالبيانات الجديدة وسوف يتم استبدالها بالنسخة المخزنة سابقا بشكل تلقائي
document.cookie = "username=Ali adel ; expires=Sat , 16 Nov, 2021 12:00:00 UTC";
</> Delete a Cookie with JavaScript
طريقة حذف ملفات cookies سهلة للغاية وهي عن طريق قيامك بتحديد تاريخ الانتهاء "expires" بتاريخ سابق وسوف يقوم المتصفح بحذفها بشكل تلقائي لأنها بالنسبة له تعتبر منتهية الصلاحية
document.cookie = "username=Ali adel ; expires=Sat , 16 Nov, 2019 12:00:00 UTC";
- يجب ان تقوم بتحديد المسار للصحيح لملفات ال cookies حتي لا يتم حذف شئ اخر كما ان هناك بعض المتصفحات التي لا تقوم بحذف ملفات ال cookies الا اذا قمت بتحديد المسار الخاص بها
</> JavaScript Cookie Example
يتمثل دور ال ملفات ال cookies كالتالي
- علي سبيل المثال عند قيام مستخدم معين بزيارة صفحة ويب خاصة بنا سوف نطلب منه ادخال اسمه ومن ثم نقوم بتخزين هذا الاسم بداخل ملفات cookies فعندما يأتي هذا المستخدم لزيارة صفحة الويب مره اخري نظهر له رسالة ترحيبية تحتوي علي اسمه الذي قام بإدخاله في المرة السابقة ويتم ذلك عن طريق استخدام ثلاثة من الدوال وهم
- دالة تقوم بتخزين البيانات بداخل ملفات cookies
- دالة تقوم بأرجاع البيانات المخزنة بداخل ملفات ال cookies
- دالة تقوم بالتأكد من وجود البيانات التي تريدها في ملف ال cookies او لا
</> Function to Set a Cookie
نقوم بتخزين البيانات بداخل ملفات cookies عن طريق انشاء دالة تقوم بتخزين هذه البيانات كما في المثال التالي
- cname : هو الاسم الذي يتم تخزين البيانات خلاله
- cvalue : هو البيانات التي سوف يتم الحصول عليها
- expires : هو يمثل تاريخ انتهاء صلاحية ملفات cookies ومن ثم حذفها
Example
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 to Get a Cookie
وللحصول علي البيانات التي قمنا بتخزينها بداخل ملفات cookies فيمكننا انشاء الدالة التالية لتقوم بأسترداد البيانات من هذه الملفات
Example
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 "";
}
</> Function to Check a Cookie
أخيرًا ، نقوم بإنشاء الدالة التي تتحقق مما إذا تم تعيين ملف تعريف الارتباط cookies
- إذا تم تعيين ملف تعريف الارتباط ، فسيتم عرض تحية للمستخدم تحتوي علي الاسم الذي قام بإدخاله
- إذا لم يتم تعيين ملف تعريف الارتباط ، فسيعرض مربع مطالبة ، يسأل عن اسم المستخدم ، ويخزن ملف تعريف ارتباط اسم المستخدم لمدة 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);
}
}
}
</> Full example
Example
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
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 "";
}
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, 30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
