❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • ما هي الجلسة
  • كيف تتخزن البيانات في الجلسة
  • إستخدامات الجلسة
  • رؤية بيانات الجلسة
  • كيفية التعامل مع الجلسة
  • إضافة عنصر في الجلسة
  • الحصول على قيمة عنصر في الجلسة
  • تحديث قيمة عنصر في الجلسة
  • حذف عنصر من الجلسة
  • حذف جميع عناصر الجلسة
  • مثال شامل حول التعامل مع الجلسة

ما هي الجلسة

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

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

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

مثال

currency = usd

عادةً ما تخصص المتصفحات للجلسلة الواحدة مساحة تخزين حجمها 5MB-10MB كحد أقصى لكل موقع يزوره المستخدم بعد أن يفتح المتصفح. مما يعني أنه في حال كان حجم البيانات المخزنة في الجلسة أكبر من ذلك فإن ذلك قد يسبب فقدان بالبيانات.

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

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

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

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

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

رؤية البيانات الجلسة المخزنة في المتصفح


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

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

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

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

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

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

مثال

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

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

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

في حال مررت لها إسم عنصر غير موجود فإنها تعطيك القيمة null.

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

مثال

sessionStorage.getItem('coupon');
sessionStorage.getItem('coupon');

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

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

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

مثال

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

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

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

إذا حاولت حذف عنصر غير موجود أساساً في ذاكرة الجلسة الحالية فإنه لن يحدث أي شيء.

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

مثال

sessionStorage.removeItem('domain');
sessionStorage.removeItem('domain');

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

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

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

مثال

sessionStorage.remove();
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>
<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>
جرب الكود
الدرس التالي❯ ❮الدرس السابق