💾 Local Storage: دليل شامل لحفظ البيانات في المتصفح 2026

هل تساءلت يوماً كيف تحفظ تطبيقات الويب مثل Google Docs أو Trello بياناتك حتى بدون إنترنت؟ أو كيف يتذكر موقع التسوق عربة التسوق الخاصة بك بعد إغلاق المتصفح؟ الإجابة تكمن في Web Storage APIs — مجموعة من الأدوات التي تتيح للمتصفح تخزين البيانات محلياً على جهاز المستخدم.

في هذا الدليل الشامل والمُحدّث لعام 2026، سنستكشف 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 ❌ لا ❌ لا ❌ لا
أنواع البيانات نص فقط نص فقط نص فقط أي نوع (Objects, Files)
الأداء بطيء سريع سريع سريع جداً (Indexed)
الاستخدام الأمثل توكنات المصادقة إعدادات المستخدم بيانات مؤقتة تطبيقات كبيرة

💾 Local Storage: التخزين الدائم

Local Storage هو أبسط طريقة لتخزين البيانات في المتصفح. البيانات تبقى دائماً حتى إذا أغلقت المتصفح وأعدت فتحه — ما لم تقم أنت بحذفها.

1. حفظ بيانات (setItem)

// حفظ قيمة نصية
localStorage.setItem('username', 'أحمد');

// حفظ كائن (يجب تحويله لـ JSON)
const user = {
  name: 'أحمد',
  email: 'ahmed@example.com',
  theme: 'dark'
};

localStorage.setItem('user', JSON.stringify(user));

2. قراءة بيانات (getItem)

// قراءة قيمة نصية
const username = localStorage.getItem('username');

// قراءة كائن (تحويل من JSON)
const user = JSON.parse(localStorage.getItem('user'));

// التحقق من وجود البيانات
if (localStorage.getItem('username')) {
  console.log('المستخدم مسجل');
}

3. حذف بيانات (removeItem / clear)

// حذف عنصر محدد
localStorage.removeItem('username');

// حذف كل البيانات (احذر!)
localStorage.clear();

// معرفة عدد العناصر
console.log(localStorage.length);

مثال عملي: تبديل الوضع الداكن/الفاتح

function toggleTheme() {
  const currentTheme = localStorage.getItem('theme') || 'light';
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';

  localStorage.setItem('theme', newTheme);
  document.documentElement.setAttribute('data-theme', newTheme);
}

// تطبيق التفضيل عند التحميل
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.setAttribute('data-theme', savedTheme);
});

⏱️ Session Storage: التخزين المؤقت

Session Storage يعمل بنفس طريقة Local Storage لكن البيانات تُحذف تلقائياً عند إغلاق التبويب أو النافذة. مثالي للبيانات المؤقتة التي لا تريدها أن تبقى بعد الجلسة.

// نفس API تماماً
sessionStorage.setItem('cart', JSON.stringify(cartItems));

// قراءة
const cart = JSON.parse(sessionStorage.getItem('cart')) || [];

// استخدامات مثالية:
// - عربة تسوق مؤقتة
// - نموذج متعدد الخطوات (Wizard)
// - بيانات بحث مؤقتة

⚡ الفرق الرئيسي: Local Storage يبقى بعد إغلاق المتصفح، Session Storage يُحذف عند إغلاق التبويب فقط.

🗄️ IndexedDB: قاعدة البيانات في المتصفح

عندما يتجاوز تخزينك البسيط — كائنات كبيرة، ملفات، أو بيانات تحتاج فهرسة — IndexedDB هو الحل. إنه نظام NoSQL مدمج في المتصفح يتيح تخزين كميات ضخمة من البيانات.

متى تستخدم IndexedDB؟

  • تخزين كميات كبيرة من البيانات (50+ MB)
  • تخزين ملفات وصور (Blobs)
  • بيانات تحتاج بحث وفهرسة
  • تطبيقات PWA تعمل بدون إنترنت
  • تخزين رسائل الدردشة في البريد الإلكتروني أولا
// فتح قاعدة البيانات
const request = indexedDB.open('MyApp', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('Database opened successfully');
};

✅ أفضل الممارسات لتخزين البيانات

🛡️ 1. لا تخزن بيانات حساسة

كلمات المرور، أرقام البطاقات، أو التوكنات السرية لا يجب تخزينها في Local Storage. استخدم httpOnly Cookies بدلاً منها.

📦 2. استخدم JSON.stringify/parse

Local Storage يخزن نصوصاً فقط. حول الكائنات والمصفوفات بـ JSON.stringify() قبل الحفظ وJSON.parse() عند القراءة.

🧹 3. نظف البيانات القديمة

لا تترك البيانات تتراكم. احذف ما لا تحتاجه بـ removeItem() أو حدد تاريخ انتهاء صلاحية في الكود.

📏 4. احترم حدود التخزين

Local Storage محدود بـ 5-10 MB. للبيانات الكبيرة استخدم IndexedDB. راقب الحجم لتجنب أخطاء QuotaExceededError.

🔒 5. تحقق من توفر API

if (typeof Storage !== 'undefined') {
  // Local Storage متاح
} else {
  // استخدم fallback
}

❓ الأسئلة الشائعة

ما الفرق بين Local Storage و Session Storage؟

Local Storage يبقى دائماً حتى تحذفه يدوياً. Session Storage يُحذف تلقائياً عند إغلاق التبويب. كلاهما محدود بـ 5-10 MB ولا يُرسلان للخادم مع طلبات HTTP.

هل Local Storage آمن لتخزين بيانات المستخدم؟

لا تخزن بيانات حساسة مثل كلمات المرور أو التوكنات. Local Storage يمكن قراءته بواسطة JavaScript، مما يجعله عرضة لهجمات XSS. استخدم httpOnly Cookies للبيانات الحساسة.

كم حجم Local Storage المتاح؟

عادةً 5-10 ميجابايت لكل نطاق. Chrome وFirefox يسمحان بـ 10 MB، Safari يقتصر على 5 MB. تجاوز الحد يرمي خطأ QuotaExceededError.

هل يمكن الوصول لـ Local Storage من iframe؟

لا، كل نطاق (domain) له Local Storage مستقل. iframe من نطاق مختلف لا يمكنه الوصول لبياناتك. هذا جزء من سياسة Same-Origin Policy للأمان.

🎓 الخلاصة

تخزين البيانات في المتصفح أداة قوية لتحسين تجربة المستخدم. اختر الأداة المناسبة لكل حالة: Local Storage للإعدادات الدائمة، Session Storage للبيانات المؤقتة، وIndexedDB للتطبيقات الكبيرة.