جافاسكربتالجلسات

ما هي الجلسة

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

كيف تتخزن البيانات في الجلسة

البيانات في الجلسة يتم تخزينها في ذاكرة الحاسوب RAM و ليس في ملفات تابعة للمتصفح.
المعلومات في الجلسة يتم حفظها على شكل عناصر، و كل عنصر يتألف من إسم و قيمة ( Name/Value ).

إستخدامات الجلسة

عادةً ما يتم استخدام ذاكرة الجلسة لحفظ المعلومات المؤقتة التي يدخلها المستخدم في النماذج خاصةً إن كان سيملئ أكثر من نموذج، و كذلك لحفظ بيانات تسجيل الدخول الخاصة به و التي تسمى Tokens.

في حال كان الموقع عبارة عن منصة للشراء أو البيع فإنه يمكن استخدام ذاكرة الجلسة لحفظ معلومات بطاقة الإئتمان، المشتريات التي قام بوضعها في السلة حتى يشتريها كلها دفعة واحدة لاحقاً، العملة التي يفضل المستخدم رؤية الأسعار بها، الدولة أو المنطقة التي يتصفح الموقع منها لمعرفة كلفة الشحن على سبيل المثال و غيرها.

رؤية بيانات الجلسة

لرؤية بيانات الجلسة الخاصة بموقع هرمش في متصفح كروم، يمكنك النقر على F12 و من ثم التوجه للتبويب Application، يليه القسم Storage، يليه النقر على إسم الموقع من القائمة Session Storage كما يظهر في الصورة التالية.

كيفية التعامل مع الجلسة

الكائن sessionStorage أو window.sessionStorage يوفر دوال جاهزة يمكن من خلالها إنشاء، تحديث أو حذف عناصر من الجلسة الحالية في المتصفح.

إضافة عنصر في الجلسة

يمكنك استخدام الدالة sessionStorage.setItem() لإضافة عنصر جديد في ذاكرة الجلسة الحالية.
عند استدعائها يجب أن تمرر لها قيمتين، الأولى تمثل إسم العنصر و الثانية تمثل قيمته.

في المثال التالي قمنا بإضافة عنصر جديد في ذاكرة الجالسة الحالية إسمه 'coupon' و قيمته 'harmash'.

sessionStorage.setItem('coupon', 'harmash');

الحصول على قيمة عنصر في الجلسة

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

في المثال التالي قمنا بالحصول على قيمة العنصر 'coupon' الموجود في ذاكرة الجلسة الحالية.

sessionStorage.getItem('coupon');

تحديث قيمة عنصر في الجلسة

الدالة sessionStorage.setItem() التي نستخدمها لإضافة عنصر في ذاكرة الجلسة الحالية، يمكننا أيضاً استخدامها لتحديث قيمته و ذلك من خلال إعطاءها إسم العنصر المراد تحديث قيمته و يليها القيمة الجديدة المراد تعيينها له.

في المثال التالي قمنا بإعادة تعيين قيمة العنصر 'subscription' الموجودة في ذاكرة المتصفح المحلية لتصبح 'yearly'.

// 'monthly' و قيمته subscription هنا قمنا بإضافة عنصر جديد في ذاكرة الجلسة الحالية إسمه
sessionStorage.setItem('subscription', 'monthly');

// 'yearly' و إعادة تعيين قيمته لتصبح subscription هنا قمنا بتحديث قيمة العنصر
sessionStorage.setItem('subscription', 'yearly');

حذف عنصر من الجلسة

يمكنك استخدام الدالة sessionStorage.removeItem() لحذف عنصر موجود في ذاكرة الجلسة الحالية.
عند استدعائها يجب أن تمرر لها إسم العنصر الذي تريد حذفه.

في المثال التالي قمنا بحذف العنصر الذي إسمه 'domain' من ذاكرة الجلسة الحالية.

sessionStorage.removeItem('domain');

حذف جميع عناصر الجلسة

يمكنك استخدام الدالة localStorage.clear() لحذف جميع العناصر الموجود في ذاكرة الجلسة الحالية.

في المثال التالي قمنا بحذف جميع العناصر الموجودة في ذاكرة الجلسة الحالية.

sessionStorage.remove();

مثال شامل حول التعامل مع الجلسة

في المثال التالي قمنا ببناء صفحة فيها ثلاث صناديق:

• الأول يسمح بإضافة عنصر في ذاكرة الجلسة.
• الثاني يسمح بالحصول على قيمة عنصر من ذاكرة الجلسة.
• الثالث يسمح بحذف عنصر من ذاكرة الجلسة.

<div class="box">
    <h3>Add New Item</h3>
    <input id="newItemName" placeholder="Item name"/>
    <input id="newItemValue" placeholder="Item value"/>
    <button onclick="addItem()">Add Item</button>
</div>

<div class="box">
    <h3>Get Item Value</h3>
    <input id="itemNameToGet" placeholder="Item name"/>
    <button onclick="showItem()">Get Value</button>
</div>

<div class="box">
    <h3>Remove Item</h3>
    <input id="itemNameToRemove" placeholder="Item name"/>
    <button onclick="removeItem()">Remove Item</button>
</div>

<script>
    // هذه الدالة تستخدم لإضافة أو تحديث عنصر في ذاكرة الجلسة
    function addItem() {
        // هنا قمنا بتخزين إسم و قيمة العنصر المراد إضافته في ذاكرة الجلسة
        let itemName = document.querySelector('#newItemName').value;
        let itemValue = document.querySelector('#newItemValue').value;
        // هنا قمنا بإضافة العنصر و قيمته في ذاكرة الجلسة
        sessionStorage.setItem(itemName, itemValue);
        // هنا قمنا بإظهار نافذة منبثقة لإعلام المستخدم أن الإضافة تمت
        alert("Item is added to session storage.");
    }

    // هذه الدالة تستخدم لرؤية قيمة عنصر موجود في ذاكرة الجلسة
    function showItem() {
        // هنا قمنا بتخزين إسم العنصر المراد الحصول على قيمته من ذاكرة الجلسة
        let itemName = document.querySelector('#itemNameToGet').value;
        // هنا قمنا بإظهار نافذة منبثقة و عرض قيمة العنصر فيها
        alert('Item Value = ' + sessionStorage.getItem(itemName));
    }

    // هذه الدالة تستخدم للحصول على قيمة عنصر موجود في ذاكرة الجلسة
    function removeItem() {
        // هنا قمنا بتخزين إسم العنصر المراد حذفه من ذاكرة الجلسة
        let itemName = document.querySelector('#itemNameToRemove').value;
        // هنا قمنا بحذف العنصر - من خلال إسمه - من ذاكرة الجلسة
        sessionStorage.removeItem(itemName);
        // هنا قمنا بإظهار نافذة منبثقة لإعلام المستخدم أنه تم الحذف
        alert("Item is removed from session storage.");
    }
</script>