| الخاصية | localStorage | sessionStorage |
|---|---|---|
| مدة البقاء | دائمة حتى الحذف الصريح | حتى إغلاق التبويب فقط |
| المشاركة بين التبويبات | نعم (نفس الأصل) | لا، لكل تبويب بياناته |
| السعة التقريبية | 5-10 ميغابايت | 5-10 ميغابايت |
يوفر المتصفح آلية لتخزين بيانات صغيرة مباشرة على جهاز المستخدم، دون الحاجة لخادم، عبر واجهتين متشابهتين تماماً في الاستخدام: localStorage وsessionStorage. الفرق الجوهري الوحيد بينهما هو مدة بقاء البيانات — localStorage تحتفظ بالبيانات بشكل دائم حتى يحذفها المستخدم أو الكود صراحة، حتى بعد إغلاق المتصفح تماماً وإعادة فتحه لاحقاً. بينما sessionStorage تُمسح تلقائياً بمجرد إغلاق تبويب المتصفح أو النافذة.
كلا الواجهتين تخزنان البيانات فقط على شكل نصوص (Strings) — لا يمكن تخزين كائنات أو مصفوفات جافاسكريبت مباشرة. للتغلب على هذا القيد عند تخزين بيانات مركبة، يجب تحويلها أولاً لنص عبر JSON.stringify() قبل التخزين، ثم تحويلها مجدداً لكائن حقيقي عبر JSON.parse() عند استرجاعها لاحقاً — وهذا النمط شائع جداً ويُستخدم في كل مشروع يعتمد على هذا التخزين.
الدوال الأساسية متطابقة بين الواجهتين: setItem(مفتاح, قيمة) للتخزين، getItem(مفتاح) للاسترجاع (يُعيد null إن لم يوجد المفتاح)، removeItem(مفتاح) لحذف عنصر واحد، وclear() لمسح كل البيانات المخزَّنة دفعة واحدة بالكامل.
من القيود المهمة الواجب معرفتها: السعة التخزينية محدودة (عادة حوالي 5-10 ميغابايت حسب المتصفح)، والبيانات مرتبطة بـ "أصل" (Origin) محدد — أي نطاق موقع + بروتوكول + منفذ — فلا يمكن لموقع الوصول لبيانات مخزَّنة من موقع آخر مختلف تماماً لأسباب أمنية. كذلك يجب عدم تخزين أي بيانات حساسة (كلمات مرور، معلومات بطاقات ائتمان) في localStorage أبداً، لأنها متاحة بالكامل لأي كود JavaScript يعمل على نفس الصفحة، بما فيها هجمات XSS المحتملة.
| 1 | // تخزين نص بسيط |
| 2 | localStorage.setItem("الاسم", "علي"); |
| 3 | console.log(localStorage.getItem("الاسم")); // "علي" |
| 4 | |
| 5 | // تخزين كائن (يحتاج تحويل) |
| 6 | const مستخدم = { اسم: "سارة", عمر: 28 }; |
| 7 | localStorage.setItem("مستخدم", JSON.stringify(مستخدم)); |
| 8 | const مستخدم_محفوظ = JSON.parse(localStorage.getItem("مستخدم")); |
| 9 | |
| 10 | localStorage.removeItem("الاسم"); |
| 11 | localStorage.clear(); |
مثال 1: حفظ واسترجاع بيانات مركبة (قائمة مهام)
| 1 | // حفظ واسترجاع قائمة مهام كاملة |
| 2 | function حفظ_المهام(مهام) { |
| 3 | localStorage.setItem("المهام", JSON.stringify(مهام)); |
| 4 | } |
| 5 | |
| 6 | function تحميل_المهام() { |
| 7 | const مخزَّن = localStorage.getItem("المهام"); |
| 8 | return مخزَّن ? JSON.parse(مخزَّن) : []; // قيمة افتراضية إن لم توجد بيانات |
| 9 | } |
| 10 | |
| 11 | const المهام = تحميل_المهام(); |
| 12 | المهام.push({ نص: "تعلم جافاسكريبت", منجزة: false }); |
| 13 | حفظ_المهام(المهام); |
مثال 2: الفرق العملي في دورة حياة كل نوع تخزين
| 1 | // الفرق العملي بين localStorage و sessionStorage |
| 2 | sessionStorage.setItem("رمز_الجلسة", "abc123"); |
| 3 | localStorage.setItem("تفضيل_الوضع_الليلي", "true"); |
| 4 | |
| 5 | // بعد إغلاق التبويب وإعادة فتحه: |
| 6 | // sessionStorage.getItem("رمز_الجلسة") -> null (تم مسحه) |
| 7 | // localStorage.getItem("تفضيل_الوضع_الليلي") -> "true" (باقٍ) |