sessionStorage وIndexedDB واختيار واجهة API المناسبة

يوفر sessionStorage الأساليب نفسها تمامًا التي يوفرها localStorage، لكن مدة بقائه مرتبطة بعلامة التبويب. وعند إغلاق علامة التبويب أو النافذة، تُمسح بياناته تلقائيًا.

كما أنه معزول لكل علامة تبويب، لذا لا تتشارك علامتا تبويب بيانات sessionStorage.

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

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

إن IndexedDB قاعدة بيانات غير متزامنة ومعاملاتية مضمّنة في المتصفح. ويمكنها تخزين بيانات أكثر بكثير من حد localStorage البالغ 5MB، كما تتعامل مع الكائنات المنظمة والمصفوفات وحتى البيانات الثنائية.

ولأنها غير متزامنة، فإنها لا تحجب الخيط الرئيسي كما يفعل localStorage.

واجهة IndexedDB الخام مطولة وتعتمد على الأحداث، لذلك تغلفها مكتبات مثل idb-keyval في دوال بسيطة قائمة على Promise، مثل get وset وdel.

ويمنحكم ذلك سهولة استخدام شبيهة بـ localStorage مع سعة IndexedDB وسلوكها غير المتزامن.

نظرًا إلى قدرة IndexedDB على تخزين قيم Blob وArrayBuffer، فهي مثالية لتخزين الصور أو المقاطع الصوتية أو الملفات التي تم تنزيلها أو الأصول المتاحة دون اتصال.

كانت هذه البيانات ستتجاوز حدود localStorage بسرعة، وكان سيتعين تحويلها إلى سلاسل نصية، وهو ما تتجنبه IndexedDB.

تخزن واجهة Cache، التي تُستخدم غالبًا مع service workers، كائنات Response الكاملة وفق مفاتيح تمثل الطلبات. وقد صُممت خصيصًا للتخزين المؤقت لاستجابات الشبكة وفق نهج عدم الاتصال أولًا.

استخدموها لتقديم الأصول واستجابات API دون الوصول إلى الشبكة عند عدم الاتصال.

يستمر localStorage بشكل دائم حتى مسحه، ويستمر sessionStorage خلال جلسة علامة التبويب فقط، وتستمر IndexedDB بشكل دائم، بينما تمتلك ملفات تعريف الارتباط مدة انتهاء قابلة للضبط عبر سماتها.

تجنب مطابقة مدة البيانات المطلوبة مع مخزن البيانات المناسب المفاجآت المتعلقة بموعد اختفاء البيانات.

تقتصر سعة localStorage وsessionStorage على نحو 5 ميغابايت، وملفات تعريف الارتباط على نحو 4 كيلوبايت لكل ملف، بينما يمكن لـ IndexedDB استخدام مئات الميغابايت أو أكثر، بحسب الجهاز والمتصفح.

بالنسبة إلى أي بيانات كبيرة الحجم، يُعد IndexedDB خيار المتصفح العملي الوحيد.

تعمل localStorage وsessionStorage وملفات تعريف الارتباط بشكل متزامن، فتحجب الخيط الرئيسي أثناء الوصول إليها. أما IndexedDB وCache API فتعملان بشكل غير متزامن وتعتمدان على Promise.

يُبقي الوصول غير المتزامن واجهة المستخدم متجاوبة حتى عند قراءة كميات كبيرة من البيانات أو كتابتها.

استخدم ملفات تعريف الارتباط httpOnly لرموز المصادقة حتى لا تتمكن النصوص البرمجية من قراءتها، واستخدم localStorage للتفضيلات الصغيرة الدائمة، وIndexedDB للملفات الكبيرة والبيانات المعقدة المتاحة دون اتصال، وsessionStorage للمسودات قصيرة الأجل داخل علامة تبويب.

طابق مخزن البيانات مع حساسية البيانات وحجمها وعمرها.

لا توجد واجهة تخزين واحدة هي الأفضل دائمًا؛ فلكل واجهة موازنة مختلفة بين السعة والاستمرارية وسلوك التزامن والأمان. تتيح لك معرفة هذه الاختلافات الاختيار عن قصد.

يستخدم التطبيق المعتاد عدة خيارات: ملفات تعريف الارتباط للمصادقة، وlocalStorage للتفضيلات، وIndexedDB للأصول المتاحة دون اتصال.

اختبر مدى فهمك لخيارات التخزين.

قارنت بين sessionStorage وlocalStorage وIndexedDB وملفات تعريف الارتباط وCache API من حيث الاستمرارية والسعة وسلوك التزامن والأمان.

وتعلمت كيفية الاختيار حسب حالة الاستخدام: ملفات تعريف الارتباط للمصادقة، وlocalStorage للتفضيلات الصغيرة، وIndexedDB للبيانات الكبيرة أو المعقدة، وsessionStorage للمسودات الخاصة بعلامة تبويب.