التخزين المحلي وتخزين الجلسة
التخزين المحلي (Local Storage) وتخزين الجلسة (Session Storage) هما من أهم أدوات التخزين في متصفح الويب التي تمكن المطور من حفظ البيانات على جهاز المستخدم بطريقة سهلة وسريعة. التخزين المحلي يسمح لك بحفظ البيانات بشكل دائم حتى بعد إغلاق المتصفح، بينما تخزين الجلسة يخزن البيانات مؤقتًا ويختفي عند إغلاق التبويب أو المتصفح. استخدام هذه الأدوات أساسي في مواقع الأخبار لتخزين تفضيلات القارئ مثل اللغة أو القسم المفضل، وفي مواقع التجارة الإلكترونية لتخزين سلة المشتريات مؤقتًا، أو على الصفحات الشخصية لحفظ إعدادات المستخدم، وكذلك في البوابات الحكومية لتخزين بيانات الجلسة أثناء ملء النماذج الرسمية.
في هذا الدرس، ستتعلم كيفية إنشاء، قراءة، تحديث وحذف البيانات باستخدام التخزين المحلي وتخزين الجلسة مع التركيز على أفضل الممارسات والأخطاء الشائعة لتجنبها. سنتناول أمثلة عملية تساعدك على فهم كيفية دمج هذه الأدوات مع HTML وJavaScript، مثل تخزين خيارات المستخدم وحفظ البيانات بين الجلسات. يمكن تشبيه عملية التخزين المحلي وتخزين الجلسة بتنظيم مكتبة: التخزين المحلي مثل رف طويل تحفظ فيه الكتب للأبد، بينما تخزين الجلسة مثل ورقة ملاحظات مؤقتة تستخدمها أثناء القراءة ولا تحتاج للاحتفاظ بها بعد الانتهاء. هذا النهج يجعل الموقع أكثر تفاعلية ومرونة ويوفر تجربة مستخدم سلسة.
مثال أساسي
javascript// مثال لتخزين وإسترجاع بيانات بسيطة في التخزين المحلي
// تخزين اسم المستخدم
localStorage.setItem('username', 'Ahmad');
// استرجاع اسم المستخدم
const user = localStorage.getItem('username');
console.log('اسم المستخدم هو:', user);
// حذف عنصر محدد
localStorage.removeItem('username');
// مسح جميع البيانات
localStorage.clear();في الكود أعلاه، بدأنا باستخدام التخزين المحلي (Local Storage) لتخزين اسم مستخدم. الدالة setItem() تأخذ مفتاح وقيمة وتخزنها في المتصفح، وهو ما يشبه كتابة ملاحظة على ورقة ووضعها على رف دائم في المكتبة. بعد ذلك، استخدمنا getItem() لاسترجاع القيمة المخزنة باستخدام المفتاح نفسه، وهي الطريقة التي تتحقق بها من وجود المعلومة وتقرأها عند الحاجة. الدالة removeItem() تمثل إزالة كتاب معين من الرف، بينما clear() تمثل تنظيف الرف بالكامل.
المفاهيم المتقدمة تشمل معرفة أن جميع البيانات المخزنة في التخزين المحلي هي نصوص (Strings) فقط، لذا إذا أردنا تخزين كائنات معقدة، يجب تحويلها إلى JSON باستخدام JSON.stringify() ثم استرجاعها باستخدام JSON.parse(). بالإضافة لذلك، التخزين المحلي والجلستي لا يتطلبان إعادة تحميل الصفحة للتحديث، مما يجعلها مفيدة في مواقع الأخبار لتخزين آخر المقالات التي قرأها المستخدم أو في التجارة الإلكترونية لتحديث سلة المشتريات مباشرة دون إرسال طلب للخادم. يجب الانتباه لحجم التخزين المحدود عادةً حوالي 5 ميغابايت لكل موقع، وهذا ما قد يحدد استخدامك للبيانات الكبيرة.
مثال عملي
javascript// مثال عملي: تخزين إعدادات المستخدم في موقع إخباري
const themeSelector = document.getElementById('theme');
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.className = savedTheme; // تطبيق الثيم المحفوظ
}
// تغيير الثيم عند اختيار المستخدم
themeSelector.addEventListener('change', (e) => {
const selectedTheme = e.target.value;
document.body.className = selectedTheme;
localStorage.setItem('theme', selectedTheme); // تخزين الإعدادات
});
// مثال لتخزين الجلسة: حفظ حالة تسجيل الدخول مؤقتًا
sessionStorage.setItem('loggedIn', 'true');
console.log('حالة تسجيل الدخول:', sessionStorage.getItem('loggedIn'));في المثال العملي، نرى كيف يمكن استخدام التخزين المحلي لتخزين إعدادات المستخدم مثل الثيم (Theme) في موقع إخباري. عند تحميل الصفحة، يتم استرجاع الثيم المحفوظ وتطبيقه مباشرة، ما يعطي تجربة سلسة للمستخدم. استخدام addEventListener يتيح الاستجابة لتغيير المستخدم وتحديث التخزين المحلي فورًا. هذا يشبه تعديل ديكور غرفة ثم وضع الملاحظة على الرف لتذكرك بالتغييرات.
أما تخزين الجلسة (Session Storage)، فقد استخدمناها لحفظ حالة تسجيل الدخول مؤقتًا. هذه البيانات ستبقى متاحة خلال التبويب الحالي فقط، وتختفي عند إغلاقه، وهو مثالي لتطبيقات البوابات الحكومية أو مواقع التجارة الإلكترونية حيث لا ترغب في الاحتفاظ بحالة المستخدم بعد الانتهاء. يمكن للمطورين الجمع بين التخزين المحلي والجلستي لتحقيق توازن بين البيانات المؤقتة والدائمة، مع الحفاظ على الأداء وسهولة إدارة البيانات.
أفضل الممارسات تشمل استخدام JSON لتخزين البيانات المعقدة بدلًا من النصوص البسيطة، والتحقق من وجود المتصفح لدعم التخزين قبل استخدامه، واستخدام أسماء مفاتيح واضحة لتجنب التعارض، وكذلك تنظيف البيانات غير المستخدمة لتجنب استهلاك الذاكرة. أما الأخطاء الشائعة فتشمل محاولة تخزين بيانات كبيرة جدًا، الاعتماد على التخزين لتبادل البيانات الحساسة بدون تشفير، نسيان تحديث القيم عند تغير الحالة، أو عدم التعامل مع أخطاء عدم دعم المتصفح. لتصحيح الأخطاء، يمكن استخدام try/catch عند التعامل مع التخزين، وفحص قيمة null عند استرجاع البيانات. التوصية العملية هي البدء بتخزين البيانات الأساسية أولًا، ومراقبة حجم التخزين، والتأكد من تجربة المستخدم قبل تطبيق التخزين على نطاق واسع.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| setItem(key, value) | تخزين قيمة مرتبطة بمفتاح | localStorage.setItem('theme', 'dark') |
| getItem(key) | استرجاع القيمة المخزنة | const theme = localStorage.getItem('theme') |
| removeItem(key) | حذف عنصر محدد | localStorage.removeItem('theme') |
| clear() | مسح جميع البيانات | localStorage.clear() |
| JSON.stringify(value) | تحويل كائن إلى نص للتخزين | localStorage.setItem('user', JSON.stringify({name:'Ahmad'})) |
| JSON.parse(value) | تحويل نص مخزن إلى كائن | const user = JSON.parse(localStorage.getItem('user')) |
في الخلاصة، التخزين المحلي وتخزين الجلسة هما أدوات قوية للتحكم بالبيانات على مستوى المتصفح. التخزين المحلي مفيد للبيانات الدائمة مثل تفضيلات المستخدم، بينما التخزين الجلسة مناسب للبيانات المؤقتة مثل حالة تسجيل الدخول أو السلة المشتريات. الربط بين هذه الأدوات وDOM يجعل الموقع أكثر تفاعلية، بينما التكامل مع backend يسمح بحفظ نسخة دائمة على الخادم عند الحاجة. للمواصلة، يُنصح بدراسة IndexedDB لتخزين البيانات الأكبر، وتقنيات التخزين الآمن، وكذلك تعلم كيفية تحسين الأداء والتوافق مع جميع المتصفحات. الحفاظ على تنظيم البيانات واختيار الأداة المناسبة لكل نوع يجعل تجربة المستخدم أكثر سلاسة ويزيد من فعالية الموقع.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى