مدونة جوارا: الكوكيز في لغة JavaScript

الكوكيز في لغة JavaScript: دليل عملي وسريع

يا هلا! خلينا ندخل بالموضوع على طول. الكوكيز (Cookies) هي ملفات نصية صغيرة بتخزنها المواقع في متصفح المستخدم. ليش؟ عشان تتذكر أشياء عنك أو عن جلستك. مثلاً: مين أنت، شو تفضيلاتك، أو شو حطيت بسلة التسوق.

1. كيف تعمل الكوكيز؟

لما تزور موقع، السيرفر ممكن يبعت للمتصفح "كوكيز". المتصفح بيخزنها، ولما ترجع تزور نفس الموقع، المتصفح بيبعت الكوكيز هاي مع طلبك للسيرفر. هيك السيرفر بيعرفك.

2. ضبط (إنشاء) كوكيز جديدة

عشان تعمل كوكي جديدة في JavaScript، بتستخدم الكائن document.cookie. الموضوع بسيط جداً:

document.cookie = "اسم_الكوكي=قيمة_الكوكي";

هاي كوكي بسيطة جداً، بس بتنحذف لما تسكر المتصفح. عشان تخليها دائمة، لازم تحدد تاريخ انتهاء صلاحية (expiration date) أو مدة (max-age).

مع تاريخ انتهاء الصلاحية (`expires`):

لازم يكون التاريخ بصيغة UTC. شوف كيف:

const d = new Date();
d.setTime(d.getTime() + (7*24*60*60*1000)); // كوكي لمدة 7 أيام
let expires = "expires=" + d.toUTCString();
document.cookie = "username=John Doe;" + expires + ";path=/";

الملاحظة: path=/ بتخلي الكوكي متاحة لكل صفحات الموقع. لو ما حددتها، بتكون متاحة فقط للمسار الحالي.

مع مدة الصلاحية (`max-age`):

max-age بتكون بالثواني. أسهل شوي:

document.cookie = "user_pref=dark_theme; max-age=" + (60*60*24*30) + "; path=/"; // شهر كامل

3. قراءة الكوكيز

لما بدك تقرا الكوكيز، document.cookie بترجعلك كل الكوكيز الموجودة للموقع الحالي كـ string واحد مفصول بفاصلة منقوطة.

let allCookies = document.cookie;
console.log(allCookies); // مثلاً: "username=John Doe; user_pref=dark_theme"

عشان تاخد قيمة كوكي معينة، بدك تعمل شوية برمجة لتقسيم الـ string هذا. هاي دالة بسيطة ممكن تساعدك:

function getCookie(name) {
    let nameEQ = name + "=";
    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, c.length); // إزالة المسافات البيضاء
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

let username = getCookie("username");
console.log("اسم المستخدم:", username); // "John Doe"

4. تحديث الكوكيز

تحديث الكوكي بسيط جداً. بتعيد ضبطها بنفس الاسم. المتصفح بيعرف إنها تحديث وبيستبدل القيمة القديمة بالجديدة:

document.cookie = "username=Jane Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

5. حذف الكوكيز

لحذف كوكي، بتضبط تاريخ انتهائها ليكون في الماضي. المتصفح بيشوف إنها منتهية الصلاحية وبيحذفها تلقائياً:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

الملاحظة: لازم تحدد نفس path و domain اللي استخدمتهم لما أنشأت الكوكي عشان تنحذف صح.

6. خيارات الكوكيز المهمة (Attributes)

في خيارات إضافية بتحدد سلوك الكوكي:

expires: تاريخ انتهاء الصلاحية (بالتوقيت العالمي UTC).
max-age: مدة الصلاحية بالثواني.
path: المسار اللي الكوكي بتكون متاحة فيه على السيرفر (مثلاً path=/ لكل الموقع).
domain: النطاق اللي الكوكي بتكون متاحة فيه.
secure: الكوكي بتنبعت فقط عبر اتصالات HTTPS المشفرة. مهم جداً للأمان.
HttpOnly: هاي الكوكي ما بتقدر توصلها عن طريق JavaScript (يعني document.cookie ما بتشوفها). هاي ميزة أمان قوية جداً للحماية من هجمات XSS. عادةً السيرفر هو اللي بيضبطها.
SameSite: بتحمي من هجمات تزوير طلبات عبر المواقع (CSRF). ممكن تكون Lax، Strict، أو None.

مثال على كوكي مع خيارات متعددة:

document.cookie = "user_session=abc123xyz; expires=Fri, 31 Dec 2024 23:59:59 UTC; path=/; secure; SameSite=Lax";

7. اعتبارات الأمان

الكوكيز مفيدة بس ممكن تكون نقطة ضعف لو ما استخدمتها صح:

**لا تخزن معلومات حساسة:** زي كلمات المرور أو أرقام بطاقات الائتمان مباشرة في الكوكيز.
**استخدم HttpOnly:** للكوكيز اللي فيها معلومات جلسة مهمة. هيك JavaScript ما بتقدر توصلها حتى لو صار هجوم XSS.
**استخدم Secure:** دائماً استخدمها لما موقعك بيشتغل على HTTPS.
**استخدم SameSite:** بيساعد في الحماية من CSRF.
**حجم الكوكيز:** الكوكيز حجمها محدود (تقريباً 4KB لكل كوكي، وعدد محدود من الكوكيز لكل نطاق). لو بدك تخزن بيانات أكبر، فكر في localStorage أو sessionStorage.

بدائل الكوكيز (نظرة سريعة)

في بدائل ممكن تكون أفضل لبعض السيناريوهات:

localStorage: بتخزن بيانات أكبر (حوالي 5-10MB) وبدون تاريخ انتهاء صلاحية. البيانات بتضل موجودة حتى بعد إغلاق المتصفح.
sessionStorage: زي localStorage بس البيانات بتنحذف لما تسكر نافذة المتصفح (session).

بالتوفيق في استخدام الكوكيز بذكاء وأمان!

← السابق الفهرس التالي →

الكوكيز في لغة JavaScript