الجلسات في لغة JavaScript

الجلسات في لغة JavaScript

يا هلا بالشباب! اليوم بنتكلم عن موضوع مهم في تطوير الويب: "الجلسات" (Sessions) وكيف نتعامل معاها من جهة JavaScript. خلينا نكون صريحين من البداية: JavaScript اللي تشتغل في المتصفح (Client-side JavaScript) ما عندها "جلسات" بالمعنى التقليدي اللي نعرفه من السيرفر (Server-side Sessions). الجلسات الحقيقية هي طريقة السيرفر يحفظ فيها معلومات عن المستخدم بين طلب وطلب.

لكن، JavaScript بتوفر لنا أدوات نقدر نستخدمها عشان نخزن بيانات على جهاز المستخدم، وهذي البيانات ممكن نستخدمها عشان نسوي سلوك يشبه الجلسات. يعني نقدر نحفظ حالة معينة للمستخدم أو تفضيلاته.

1. تخزين البيانات على جهاز المستخدم (Client-side Storage)

عندنا طريقتين رئيسيتين في المتصفح لتخزين البيانات: localStorage و sessionStorage.

sessionStorage: جلسة مؤقتة لعلامة التبويب

هذي الأداة تخلينا نخزن بيانات تبقى موجودة طول ما علامة التبويب (Tab) مفتوحة. لو قفلت التاب أو المتصفح، البيانات تختفي. مفيدة جداً لو عندك معلومات مؤقتة تحتاجها بس لجلسة تصفح واحدة.

كيف نستخدمها؟

// تخزين بيانات
sessionStorage.setItem('username', 'أحمد_المبرمج');
sessionStorage.setItem('theme', 'dark');

// استرجاع البيانات
let user = sessionStorage.getItem('username');
console.log(user); // يطبع: أحمد_المبرمج

// حذف عنصر معين
sessionStorage.removeItem('theme');

// مسح كل البيانات في sessionStorage للتاب الحالي
// sessionStorage.clear();

ملاحظة سريعة: البيانات اللي تخزنها في sessionStorage (و localStorage) لازم تكون على شكل سلاسل نصية (Strings). لو عندك كائن (Object) أو مصفوفة (Array)، لازم تحولها لـ JSON String قبل ما تخزنها، وترجع تحولها لكائن لما تسترجعها.

let userSettings = { id: 123, language: 'ar', notifications: true };
    sessionStorage.setItem('settings', JSON.stringify(userSettings));

    let storedSettings = JSON.parse(sessionStorage.getItem('settings'));
    console.log(storedSettings.language); // يطبع: ar

localStorage: بيانات تبقى معاك

هذي الأداة تشبه sessionStorage بس الفرق إن البيانات اللي تخزنها فيها تبقى موجودة حتى لو قفلت المتصفح ورجعت فتحته مرة ثانية. يعني بيانات دائمة (Persistent Data) للمتصفح هذا.

كيف نستخدمها؟ نفس طريقة sessionStorage بالضبط، بس بنستخدم localStorage بدالها:

// تخزين بيانات
localStorage.setItem('welcomeMessageShown', 'true');
localStorage.setItem('lastVisit', new Date().toISOString());

// استرجاع البيانات
let messageShown = localStorage.getItem('welcomeMessageShown');
console.log(messageShown); // يطبع: true

// حذف عنصر معين
localStorage.removeItem('lastVisit');

// مسح كل البيانات في localStorage للموقع الحالي
// localStorage.clear();

الكوكيز (Cookies): الجندي القديم

الكوكيز هي أقدم طريقة لتخزين البيانات على جهاز المستخدم. تقدر تتعامل معاها بـ JavaScript عن طريق document.cookie، لكنها متعبة شوي لأنها سلسلة نصية واحدة كبيرة، وفيها قيود على الحجم. عادةً نستخدمها عشان نحفظ "معرف الجلسة" (Session ID) اللي يرسله السيرفر.

// قراءة الكوكيز (ترجع سلسلة نصية بكل الكوكيز)
console.log(document.cookie);

// تعيين كوكي (هذي الطريقة بدائية شوي، عادةً السيرفر هو اللي يعين الكوكيز)
document.cookie = "myPref=value; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

نصيحة: للتعامل مع الكوكيز بشكل أفضل، فيه مكتبات جاهزة زي js-cookie تخلي الشغل معاها أسهل بكثير.

2. الجلسات من جهة السيرفر (Server-side Sessions)

زي ما قلنا في البداية، الجلسات الحقيقية تتم على السيرفر. السيرفر يسوي لك "جلسة" ويخزن فيها بياناتك، ويرسل لك Session ID (عادةً في كوكي). المتصفح يرجع يرسل هذا الـ Session ID مع كل طلب عشان السيرفر يعرف أي جلسة تخصك.

JavaScript اللي في المتصفح ما تقدر تتحكم في الجلسة اللي على السيرفر بشكل مباشر، لكنها تقدر:

• تقرأ الـ Session ID لو كان في كوكي (لكن غالباً الكوكيز اللي فيها Session ID تكون HttpOnly عشان الأمان، يعني JavaScript ما تقدر تقراها).
• ترسل طلبات (Ajax/Fetch) للسيرفر اللي بدوره يستخدم الـ Session ID عشان يتفاعل مع جلستك.

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

مهم جداً تنتبه للأمان لما تتعامل مع تخزين البيانات على جهاز المستخدم:

• لا تخزن بيانات حساسة: زي كلمات المرور، أرقام البطاقات الائتمانية، أو أي معلومات شخصية سرية جداً في localStorage أو sessionStorage. هذي البيانات ممكن تتسرق عن طريق هجمات XSS (Cross-Site Scripting).
• التحقق من البيانات: أي بيانات تقرأها من localStorage أو sessionStorage، افترض إنها ممكن تكون معدلة أو تالفة. دائماً تحقق من صحتها قبل ما تستخدمها.
• HttpOnly Cookies: استخدم HttpOnly flags للكوكيز اللي فيها Session ID عشان تمنع JavaScript من الوصول لها، وهذا يقلل خطر سرقتها عن طريق XSS.

الخلاصة

JavaScript في المتصفح ما تدير جلسات بالمعنى الحرفي، لكن localStorage و sessionStorage بيعطوك أدوات قوية لتخزين بيانات على جهاز المستخدم عشان تسوي سلوك يشبه الجلسات. استخدمها بحكمة ومع مراعاة جانب الأمان.

أتمنى يكون الشرح واضح ومفيد! يلا، طبقوا اللي تعلمتوه!

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