الجلسات
ما هي الجلسة
ذاكرة الجلسة (Session Storage) هي مساحة تخزين مؤقتة متوفرة في المتصفح حيث أنه يتم حذف كل المعلومات التي نضعها فيها عند الخروج منه.
في هذا الدرس ستتعرف على أهمية الجلسة، كيف تخزن البيانات فيها، كيف تقرأها و كيف تحذفها منها خطوة خطوة.
كيف تتخزن البيانات في الجلسة
البيانات في الجلسة يتم تخزينها في ذاكرة الحاسوب RAM و ليس في ملفات تابعة للمتصفح.
المعلومات في الجلسة يتم حفظها على شكل عناصر، و كل عنصر يتألف من إسم و قيمة ( Name/Value ).
مثال
عادةً ما تخصص المتصفحات للجلسلة الواحدة مساحة تخزين حجمها 5MB-10MB كحد أقصى لكل موقع يزوره المستخدم بعد أن يفتح المتصفح. مما يعني أنه في حال كان حجم البيانات المخزنة في الجلسة أكبر من ذلك فإن ذلك قد يسبب فقدان بالبيانات.
إستخدامات الجلسة
عادةً ما يتم استخدام ذاكرة الجلسة لحفظ المعلومات المؤقتة التي يدخلها المستخدم في النماذج خاصةً إن كان سيملئ أكثر من نموذج، و كذلك لحفظ بيانات تسجيل الدخول الخاصة به و التي تسمى Tokens.
في حال كان الموقع عبارة عن منصة للشراء أو البيع فإنه يمكن استخدام ذاكرة الجلسة لحفظ معلومات بطاقة الإئتمان، المشتريات التي قام بوضعها في السلة حتى يشتريها كلها دفعة واحدة لاحقاً، العملة التي يفضل المستخدم رؤية الأسعار بها، الدولة أو المنطقة التي يتصفح الموقع منها لمعرفة كلفة الشحن على سبيل المثال و غيرها.
رؤية بيانات الجلسة
لرؤية بيانات الجلسة الخاصة بموقع هرمش في متصفح كروم، يمكنك النقر على F12 و من ثم التوجه للتبويب Application، يليه القسم Storage، يليه النقر على إسم الموقع من القائمة Session Storage.
في حال قمت بإجراء أي تعديل يدوي في المعلومات التي تظهر لك في ذاكرة الجلسة فإن ذلك سيسبب مشكلة، فمثلاً قد تجد أن الموقع سيطلب منك إعادة تسجيل الدخول من جديد و قد تجد أن الموقع لم يعد يعمل عندك كما كان و في هذه الحالة عليك الخروج من المتصفح و العودة له و تنفيذ الخطوات التي فعلتها سابقاً حتى يعيد الموقع تخزينها بشكل صحيح.
كيفية التعامل مع الجلسة
الكائن
إضافة عنصر في الجلسة
يمكنك استخدام الدالة
عند استدعائها يجب أن تمرر لها قيمتين، الأولى تمثل إسم العنصر و الثانية تمثل قيمته.
في المثال التالي قمنا بإضافة عنصر جديد في ذاكرة الجالسة الحالية إسمه
مثال
sessionStorage.setItem('coupon', 'codafox.blogspot.com');
الحصول على قيمة عنصر في الجلسة
يمكنك استخدام الدالة
عند استدعائها يجب أن تمرر لها إسم العنصر الذي تريد الحصول على قيمته.
في حال مررت لها إسم عنصر غير موجود فإنها تعطيك القيمة
في المثال التالي قمنا بالحصول على قيمة العنصر
مثال
sessionStorage.getItem('coupon');
تحديث قيمة عنصر في الجلسة
الدالة
في المثال التالي قمنا بإعادة تعيين قيمة العنصر
مثال
// 'monthly' و قيمته subscription هنا قمنا بإضافة عنصر جديد في ذاكرة الجلسة الحالية إسمه sessionStorage.setItem('subscription', 'monthly'); // 'yearly' و إعادة تعيين قيمته لتصبح subscription هنا قمنا بتحديث قيمة العنصر sessionStorage.setItem('subscription', 'yearly');
حذف عنصر من الجلسة
يمكنك استخدام الدالة
عند استدعائها يجب أن تمرر لها إسم العنصر الذي تريد حذفه.
إذا حاولت حذف عنصر غير موجود أساساً في ذاكرة الجلسة الحالية فإنه لن يحدث أي شيء.
في المثال التالي قمنا بحذف العنصر الذي إسمه
مثال
sessionStorage.removeItem('domain');
حذف جميع عناصر الجلسة
يمكنك استخدام الدالة
في المثال التالي قمنا بحذف جميع العناصر الموجودة في ذاكرة الجلسة الحالية.
مثال
sessionStorage.remove();
مثال شامل حول التعامل مع الجلسة
في المثال التالي قمنا ببناء صفحة فيها ثلاث صناديق:
- الأول يسمح بإضافة عنصر في ذاكرة الجلسة.
- الثاني يسمح بالحصول على قيمة عنصر من ذاكرة الجلسة.
- الثالث يسمح بحذف عنصر من ذاكرة الجلسة.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: arial;
}
.box {
background: #ff7a18;
padding: 15px;
margin: 20px 0;
}
.box h3 {
margin-bottom: 10px;
}
.box input, .box button {
display: block;
margin-top: 10px;
height: 30px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>JavaScript Session Storage</h1>
<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>
</body>
</html>