هل تساءلت يوماً كيف تحفظ تطبيقات الويب مثل Google Docs أو Trello بياناتك حتى بدون إنترنت؟ أو كيف يتذكر موقع التسوق عربة التسوق الخاصة بك بعد إغلاق المتصفح؟ الإجابة تكمن في Web Storage APIs — مجموعة من الأدوات التي تتيح للمتصفح تخزين البيانات محلياً على جهاز المستخدم.
في هذا الدليل الشامل، سنستكشف Local Storage، Session Storage، و IndexedDB — متى تستخدم كل واحد، الفروقات بينهم، وأفضل الممارسات مع أمثلة عملية بالكود.
📊 هل تعلم؟ Local Storage يوفر مساحة تخزين تصل إلى 5-10 ميجابايت لكل نطاق (domain) — أكثر بكثير من Cookies التي تقتصر على 4 كيلوبايت. وهذا يجعله مثالياً لتخزين الإعدادات والتفضيلات.
🤔 لماذا نحفظ البيانات في المتصفح؟
قبل أن نتعمق في التقنيات، لنفهم متى نحتاج تخزين البيانات محلياً:
- تذكر تفضيلات المستخدم: الوضع الداكن/الفاتح، لغة الواجهة، حجم الخط
- حفظ حالة التطبيق: محتوى مسودة بريد إلكتروني، نموذج غير مكتمل
- تخزين مؤقت (Cache): بيانات تم جلبها من الخادم لتجنب طلبات متكررة
- العمل بدون إنترنت: تطبيقات Progressive Web App (PWA)
- تحسين الأداء: تقليل طلبات الشبكة بتحميل البيانات من التخزين المحلي
📊 مقارنة بين أنظمة التخزين في المتصفح
| الميزة | Cookies | Local Storage | Session Storage | IndexedDB |
|---|---|---|---|---|
| السعة | ~4 KB | ~5-10 MB | ~5-10 MB | ~50 MB+ (أو أكثر) |
| مدة الحفظ | حسب تاريخ الانتهاء | دائمة (حتى الحذف) | حتى إغلاق التبويب | دائمة (حتى الحذف) |
| الوصول | أي نافذة/تبويب | أي نافذة/تبويب | نفس التبويب فقط | أي نافذة/تبويب |
| إرسال للخادم | ✅ مع كل طلب HTTP | ❌ لا | ❌ لا | ❌ لا |
| أنواع البيانات | نص فقط (String) | نص فقط (String) | نص فقط (String) | أي نوع (Objects, Files, Blobs) |
| الأداء | بطيء (يُرسل مع HTTP) | سريع | سريع | سريع جداً (Indexed) |
| الاستخدام الأمثل | توكنات المصادقة | إعدادات المستخدم | بيانات مؤقتة للجلسة | تطبيقات كبيرة، ملفات |
💾 Local Storage: التخزين الدائم
Local Storage هو أبسط طريقة لتخزين البيانات في المتصفح. البيانات تبقى دائماً حتى إذا أغلقت المتصفح وأعدت فتحه — ما لم تقم أنت بحذفها.
حفظ بيانات (setItem)
localStorage.setItem('username', 'أحمد');
// حفظ كائن (يجب تحويله لـ JSON أولاً)
const user = {
name: 'أحمد',
email: 'ahmed@example.com',
theme: 'dark'
};
localStorage.setItem('user', JSON.stringify(user));
قراءة بيانات (getItem)
const username = localStorage.getItem('username');
console.log(username); // "أحمد"
// قراءة كائن (تحويل من JSON)
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
console.log(user.name); // "أحمد"
// التحقق من وجود البيانات
if (localStorage.getItem('username')) {
console.log('المستخدم مسجل');
} else {
console.log('لا يوجد مستخدم');
}
حذف بيانات (removeItem / clear)
localStorage.removeItem('username');
// حذف ALL البيانات (احذر!)
localStorage.clear();
// معرفة عدد العناصر المخزنة
console.log(localStorage.length);
// الوصول لعنصر بالترتيب
const key = localStorage.key(0); // اسم أول مفتاح
مثال عملي: تبديل الوضع الداكن/الفاتح
function toggleTheme() {
const currentTheme = localStorage.getItem('theme') || 'light';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
}
// تطبيق التفضيل عند تحميل الصفحة
function applyTheme() {
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
}
// تشغيل عند تحميل الصفحة
window.addEventListener('DOMContentLoaded', applyTheme);
⏱️ Session Storage: التخزين المؤقت
Session Storage يعمل بنفس طريقة Local Storage لكن البيانات تُحذف تلقائياً عند إغلاق التبويب أو النافذة. مثالي للبيانات المؤقتة التي لا تريدها أن تبقى بعد الجلسة.
sessionStorage.setItem('cart', JSON.stringify(cartItems));
// قراءة
const cart = JSON.parse(sessionStorage.getItem('cart')) || [];
// استخدامات مثالية:
// - عربة تسوق مؤقتة
// - نموذج متعدد الخطوات (Wizard)
// - بيانات بحث مؤقتة
// - حالة UI مؤقتة
🗄️ IndexedDB: قاعدة البيانات في المتصفح
عندما يتجاوز تخزينك البسيط — كائنات كبيرة، ملفات، أو بيانات تحتاج فهرسة — IndexedDB هو الحل. إنه نظام NoSQL مدمج في المتصفح.
🎯 متى تستخدم IndexedDB؟
- تخزين كميات كبير