ملفات تعريف الارتباط
ملف تعريف الارتباط نص صغير قد يرفقه المتصفح بطلبات الموقع المطابق. تكتب الصفحة theme=dark ثم تعرض theme / dark. لا تضع كلمة مرور أو رمز وصول في ملف تقرؤه JavaScript.
ليس تخزين الويب
في الدرس السابق بقي saved / lida / tea في localStorage. الكوكي مختلف؛ قد يذهب مع طلبات الموقع والمسار المطابقين، وليس إلى كل موقع. document.cookie سلسلة مفصولة بفواصل منقوطة، لا كائن.
تفضيل بسيط
الاسم والقيمة هنا هما theme=dark. تجعل Path=/ التفضيل مرئياً في مسارات الموقع، وتقلل SameSite=Lax الحالات العابرة للمواقع، أما Secure فلا يرسل إلا عبر HTTPS.
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
console.log(document.cookie);
قد يحتوي السجل أزواجاً عدة يمكن للصفحة قراءتها. لذلك لا تقارن السلسلة كلها بزوج واحد؛ ابحث عن الاسم الذي تريده.
قراءة اسم واحد
قسّم النص عند ;، ثم ابحث عن الاسم متبوعاً بـ =. بعد علامة المساواة تأتي القيمة، وdecodeURIComponent يعيدها إلى شكلها المقروء.
function readCookie(name) {
const start = name + "=";
const pair = document.cookie
.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
console.log(readCookie("theme"));
console.log(readCookie("drink"));
النتيجتان هما dark ثم null. لم تكتب الصفحة drink، وغياب الاسم لا يسبب خطأ؛ الدالة تعيد null، كما أعاد التخزين السابق null للمفتاح الغائب.
قيمة تحتاج ترميزاً
للمحرفين ; و= معنى نحوي داخل الكوكي. مرر tea / regular إلى encodeURIComponent قبل كتابته، واستعمل decodeURIComponent عند القراءة.
يعيد المثال tea / regular. لا تضع فاصلة منقوطة خاماً في القيمة، فهي تبدأ جزءاً جديداً من تركيب الكوكي.
📊 Cookie and localStorage
| الحاجة | Cookie | localStorage |
|---|---|---|
| مع الطلبات المطابقة | غالباً نعم | لا |
| قراءة JavaScript | ما لم يكن HttpOnly | نعم |
| تفضيل صغير | ممكن | أبسط غالباً |
| معرّف جلسة حساس | الخادم: HttpOnly + Secure | لا تحفظه هنا |
كوكي أم localStorage؟
اختر حسب الجهة التي تحتاج القيمة. لا يجعل أي منهما سراً آمناً إذا كانت JavaScript ضارة تعمل أصلاً على الصفحة.
لا تستطيع JavaScript تعيين HttpOnly أو قراءته. يرسله الخادم في ترويسة Set-Cookie. هذا الدرس عن تفضيل لون غير حساس، لا عن تسجيل الدخول.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
document.cookie = "theme=dark; Path=/; SameSite=Lax; Secure";
function readCookie(name) {
const start = name + "=";
const pair = document.cookie.split("; ")
.find((part) => part.startsWith(start));
return pair ? decodeURIComponent(pair.slice(start.length)) : null;
}
document.querySelector("#line").textContent =
"theme / " + readCookie("theme");
</script>
</body>
</html>
السطر الظاهر
تحفظ الصفحة dark، وتقرأ theme وحده، ثم تكتب الاسم والقيمة معاً.
السطر هو theme / dark. قد يرفض المتصفح كوكي Secure على HTTP العادي؛ الموقع الحي يحتاج HTTPS. أما saved / lida / tea فهو سطر درس التخزين السابق.
تدريب
- اكتب theme=dark مع Path=/ واقرأ theme.
- اقرأ drink قبل كتابته: الناتج null.
- شفر tea / regular ثم أعد قراءته.
- اذكر HttpOnly وSecure وSameSite للجلسة.
- اقرأ السطر: theme / dark.
أخطاء وخلاصة
لا تعامل document.cookie ككائن أو خزنة أسرار. لا تقارن النص كله، ولا تنس Path=/، ولا تكتب ; أو = خامين. للمعرّف الحساس: الخادم يضبط HttpOnly وSecure وSameSite؛ وللتفضيل تقرأ theme فتجد dark.
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى