JavaScript

JavaScript Cookies

في هذا الدرس سوف نتعرف علي ال cookies ملفات تعريف الارتباط وهي عبارة عن ملفات صغيره تحمل بعض المعلومات عن المستخدم وتقوم بتخزينها حتي يتم استخدامها عند دخول المستخدم مره اخري علي الموقع دون الحاجة الي كتابة نفس المعلومات مره اخري 

التاريخ

16 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

968

المواضيع

24
الشروحات 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.