localStorage في مقابل sessionStorage

يوفّر Web Storage API مخزنين من نوع المفتاح والقيمة على جانب العميل: localStorage (يستمر بين الجلسات) وsessionStorage (يُمسح عند إغلاق علامة التبويب). يخزّن كلاهما قيمًا نصية، ويمكن الوصول إليهما بشكل متزامن عبر JavaScript ضمن الأصل نفسه.

تستمر البيانات في localStorage حتى يمسحها صراحةً الكود أو المستخدم أو عملية حذف بيانات المتصفح. وتبقى هذه البيانات بعد إعادة تشغيل المتصفح وتحديث الصفحة وإغلاق علامة التبويب. وتبلغ السعة عادةً بين 5 و10 ميجابايت لكل أصل، وفقًا للمتصفح.

يقتصر sessionStorage على علامة التبويب الحالية وجلسة التصفح الحالية. وتبقى البيانات بعد تحديث الصفحة ضمن علامة التبويب نفسها، لكنها تُمسح عند إغلاق علامة التبويب. وتملك علامتا تبويب للموقع نفسه sessionStorage منفصلًا ومعزولًا، ولا تتشاركان البيانات.

يشترك كلا المخزنين في واجهة API نفسها: setItem(key, value) وgetItem(key) وremoveItem(key) وclear()، إضافةً إلى الخاصية length. يعمل الكود نفسه مع كليهما؛ فما عليك سوى استبدال localStorage بـ sessionStorage أو العكس.

استخدم localStorage من أجل: تفضيلات المستخدم مثل السمة واللغة، واستجابات API المخزنة مؤقتًا، ووظيفة تذكّر المستخدم. واستخدم sessionStorage من أجل: حالة خطوات المعالج أو النموذج، وسلة التسوق المؤقتة قبل إتمام الشراء، والبيانات التي لا ينبغي أن تستمر بين الزيارات لأسباب تتعلق بالخصوصية.

يقتصر كلا المخزنين بدقة على الأصل نفسه (البروتوكول + المضيف + المنفذ). لا يستطيع https://example.com قراءة localStorage الذي عيّنه http://example.com. وهذا يمثل حدًا أمنيًا؛ كما تُعد النطاقات الفرعية أصولًا منفصلة ما لم تتم معالجة document.domain (وهو أمر مهمل).

يضع معظم المتصفحات حدًا يقارب 5 ميجابايت لكل أصل لكلا المخزنين. ويؤدي تجاوز هذا الحد إلى طرح QuotaExceededError. أما احتياجات تخزين كميات كبيرة من البيانات فتتطلب IndexedDB، الذي يدعم جيجابايتات من البيانات المهيكلة. صُمم Web Storage لأزواج المفتاح والقيمة الصغيرة، وليس للبيانات الثنائية أو مجموعات البيانات الكبيرة.

تتم عمليات القراءة والكتابة في Web Storage بشكل متزامن، مما يحجب سلسلة التعليمات الرئيسية. وقد يؤدي ذلك إلى التقطّع عند قراءة كميات كبيرة من البيانات أو كتابتها. يُفضّل استخدام IndexedDB لعمليات البيانات الكبيرة المتكررة. اجعل قيم Web Storage صغيرة ونادرة لتجنب مشكلات الأداء.

لا يخزّن Web Storage إلا السلاسل النصية. حوّل الكائنات إلى تسلسل باستخدام JSON.stringify()، وأعد تحويلها باستخدام JSON.parse(). تعامل مع حالات فشل التحليل: try { return JSON.parse(stored) } catch { return defaultValue }. تؤدي القيم التالفة أو غير المتوافقة مع JSON في التخزين إلى أخطاء في التحليل.

يُمسح localStorage في الوضع الخاص أو المتخفي عند إغلاق جميع النوافذ الخاصة، وبذلك يتصرف مثل sessionStorage. يجب أن يتعامل الكود الذي يعتمد على localStorage لحفظ حالة المصادقة مع احتمال مسحه بشكل غير متوقع.

تفرض المتصفحات قيودًا متزايدة على الوصول إلى تخزين الجهات الخارجية. ولا يستطيع iframe من third-party.com ضمن first-party.com الوصول إلى localStorage الخاص بـ third-party.com. ويقسّم ITP في Safari وEnhanced Tracking Protection في Firefox التخزين إلى أقسام، بينما لا يتأثر الاستخدام من الطرف الأول.

متى يتم مسح sessionStorage؟

يستمر localStorage إلى أجل غير محدد حتى يُمسح برمجيًا أو بواسطة المستخدم، بينما يُمسح sessionStorage عند إغلاق علامة التبويب. يقتصر كلاهما على الأصل نفسه، وهما مخزنا مفتاح وقيمة نصيين ومتزامنين بسعة تقارب 5 ميجابايت. استخدم localStorage للتفضيلات والحالة المستمرة، واستخدم sessionStorage للحالة المؤقتة الخاصة بالجلسة التي لا ينبغي أن تبقى بعد إغلاق علامة التبويب.