مساحة التخزين على الويب

هناك العديد من الخيارات المختلفة لتخزين البيانات في المتصفح. أيهما يناسب احتياجاتك؟

Pete LePage

يمكن أن تكون اتصالات الإنترنت رديئة أو غير موجودة أثناء التنقل، ولهذا السبب يعد الدعم دون اتصال بالإنترنت والأداء الموثوق به من الميزات الشائعة في تطبيقات الويب التقدّمية حتى عند استخدام لاسلكي مثالي والبيئات والاستخدام الحكيم للتخزين المؤقت وتقنيات التخزين الأخرى تحسين تجربة المستخدم بشكل كبير. وهناك عدة طرق لتخزين موارد التطبيق الثابتة (HTML وJavaScript وCSS والصور وغيرها) البيانات (بيانات المستخدم والمقالات الإخبارية وما إلى ذلك). ولكن ما الحل الأفضل؟ الطريقة التي يمكنك تخزينها؟ كيف يمكنك منع التخلص من هذا التطبيق؟

ماذا يجب أن أستخدم؟

في ما يلي اقتراح عام لتخزين الموارد:

• بالنسبة إلى موارد الشبكة اللازمة لتحميل تطبيقك والمحتوى المستند إلى الملفات، استخدام cache Storage API (جزء من عاملو الخدمات).
• بالنسبة إلى البيانات الأخرى، استخدم IndexedDB (مع وعد برنامج تضمين).

تتوافق أداة IndexedDB وواجهة برمجة تطبيقات ذاكرة التخزين المؤقت مع كل المتصفحات الحديثة. كلاهما غير متزامن ولن يحظر سلسلة المحادثات الرئيسية. وهي ويمكن الوصول إليها من الكائن window وعاملي الويب وعاملي الخدمات، مما يجعل من السهل استخدامها في أي مكان في التعليمات البرمجية.

ماذا عن آليات التخزين الأخرى؟

هناك العديد من آليات التخزين الأخرى المتاحة في المتصفح، ولكنها: يمكن استخدامها بشكل محدود وقد تتسبب في حدوث مشاكل كبيرة في الأداء.

إنّ SessionStorage عبارة عن علامة تبويب محددة، وتقتصر على الفترة منذ إنشاء علامة التبويب. قد تكون مفيدة في تخزين كميات صغيرة من جلسات معلومات معينة، مثل مفتاح IndexedDB. يجب استخدامه مع بحذر لأنه متزامن وسيحظر سلسلة التعليمات الرئيسية. من المهم لا يزيد حجمها عن 5 ميغابايت ويمكن أن تحتوي على سلاسل فقط. نظرًا لأنها محددة بعلامة التبويب، فلا يمكن الوصول إليها من قِبل العاملين على الويب أو العاملين في الخدمات.

يجب تجنُّب استخدام LocalStorage لأنها متزامنة وسيؤدي إلى حظر سلسلة التعليمات الرئيسية فالحد الأقصى هو 5 ميغابايت ويمكن أن يحتوي على سلاسل فقط. لا يمكن الوصول إلى LocalStorage من قِبل العاملين على الويب أو الخدمة العمال.

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

توفر File System API وFileWriter API طرقًا قراءة الملفات وكتابتها على نظام ملفات في وضع الحماية. وفي حين أنه غير متزامن، فلا يوصى به لأنه متوفّرة فقط في المتصفّحات المستندة إلى Chromium.

تم تصميم File System Access API لجعله على المستخدمين قراءة الملفات وتعديلها على نظام الملفات المحلي لديهم. المستخدِم أن تمنح الصفحة إذنًا قبل أن تتمكن الصفحة من قراءة أي ملف محلي أو الكتابة إليه لا يتم الاحتفاظ بالأذونات على مستوى الجلسات.

يجب عدم استخدام WebSQL، ويجب نقل بيانات الاستخدام الحالية إلى قاعدة بيانات مفهرسة تمت إزالة الدعم من جميع المواقع الرئيسية تقريبًا المتصفحات. توقف رابط W3C عن الحفاظ على مواصفات لغة الاستعلامات البنيوية (SQL) على الويب في عام 2010، بدون خطط لإجراء مزيد من التحديثات.

يجب عدم استخدام ذاكرة التخزين المؤقت للتطبيق، كما يجب أن يكون الاستخدام الحالي هو ترحيلها إلى عاملي الخدمة وواجهة برمجة تطبيقات ذاكرة التخزين المؤقت. لقد كان متوقّفًا نهائيًا وستتم إزالة الدعم من المتصفحات في المستقبل.

كم يمكنني تخزينه؟

باختصار، كثيرًا أو مئات الميغابايت على الأقل، ومن المحتمل مئات الجيجابايت أو أكثر. تختلف عمليات تنفيذ المتصفح، ولكن حجم البيانات من مساحة التخزين المتوفرة تعتمد عادةً على حجم مساحة التخزين المتاحة الخاص بك.

• يتيح Chrome للمتصفّح استخدام ما يصل إلى% 80 من إجمالي مساحة القرص. يمكن للمصدر تستخدم ما يصل إلى 60% من إجمالي مساحة القرص. يمكنك استخدام StorageManager API لتحديد الحد الأقصى للحصة المتاحة. تطبيقات أخرى تستند إلى Chromium قد تختلف المتصفحات.
  • في "وضع التصفّح المتخفي"، يقلّل Chrome من مساحة التخزين التي يمكن أن يستخدمها المصدر. إلى حوالي 5٪ من إجمالي مساحة القرص.
  • في حال تفعيل المستخدم "محو ملفات تعريف الارتباط وبيانات الموقع الإلكتروني عند إغلاق جميع نوافذ في Chrome، تنخفض حصة التخزين بشكل كبير 300 ميغابايت تقريبًا كحد أقصى.
  • راجع PR #3896 لمعرفة تفاصيل حول استخدام Chrome.
• يمكن أن يخزن Internet Explorer 10 والإصدارات الأحدث ما يصل إلى 250 ميغابايت وسيطلب من المستخدم عند استخدام أكثر من 10 ميغابايت.
• يتيح Firefox للمتصفح استخدام ما يصل إلى 50% من مساحة القرص الخالية. إنّ eTLD+1 مجموعة (على سبيل المثال، example.com وwww.example.com وfoo.bar.example.com) قد يستخدم ما يصل إلى 2 غيغابايت. يمكنك استخدام صفحة StorageManager API لتحديد حجم المساحة المتبقية المتوفرة.
• ويبدو أنّ متصفّح Safari (على كلٍّ من أجهزة الكمبيوتر والأجهزة الجوّالة) يسمح بنحو 1 غيغابايت. عندما ينتهي الحد بعد الوصول، سيطلب Safari من المستخدم، مع زيادة الحد إلى 200 ميغابايت. الإضافات. لم أعثر على أي مستندات رسمية في هذا الشأن.
  • في حال إضافة تطبيق ويب تقدّمي (PWA) إلى الشاشة الرئيسية في متصفّح Safari على الأجهزة الجوّالة، سيظهر إنشاء حاوية تخزين جديدة، ولن تتم مشاركة أي محتوى بين تطبيق الويب التقدّمي (PWA) وSafari للجوّال. وبعد بلوغ الحصة المسموح بها لتطبيق الويب التقدّمي (PWA) المثبَّت، لا يبدو أن هناك أي طريقة لطلب سعة تخزين إضافية.

في الماضي، إذا تجاوز أحد المواقع حد معين من البيانات المخزنة، كان يتم أن المستخدم سيطلب من المستخدم منح إذن لاستخدام المزيد من البيانات. بالنسبة على سبيل المثال، إذا استخدم المصدر أكثر من 50 ميغابايت، سيطلب المتصفح من المستخدم للسماح بتخزين ما يصل إلى 100 ميغابايت، ثم السؤال مرة أخرى بزيادات قدرها 50 ميغابايت.

واليوم، لن تعرض معظم المتصفحات الحديثة طلبًا من المستخدم، وستسمح بموقع إلكتروني لاستخدام ما يصل إلى حصتها المخصصة. والاستثناء هو Safari، الذي إشعارات عند تجاوز مساحة التخزين المتوفّرة، ويطلب الإذن بزيادة المساحة الحصة المخصصة. في حال كان المصدر استخدام أكثر من حصتها المخصصة، ومحاولات إضافية لكتابة بيانات ستفشل.

كيف يمكنني التحقّق من حجم مساحة التخزين المتوفّرة؟

في العديد من المتصفّحات، يمكنك استخدام StorageManager API لتحديد حجم مساحة التخزين المتاحة للمصدر ومقدار مساحة التخزين التي يستخدمها. إنه يعرض إجمالي عدد وحدات البايت المستخدمة في IndexedDB وواجهة برمجة التطبيقات لذاكرة التخزين المؤقت، وهذا يجعل من الممكن لاحتساب مساحة التخزين المتبقية المتوفّرة تقريبًا

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

لم يتم implemented StorageManager على جميع المتصفحات حتى الآن، لذلك يجب أن تكتشفها الميزة قبل استخدامها. حتى عندما يكون متاحًا، يجب لا يزال يتم اكتشاف أخطاء تجاوز الحصة المسموح بها (انظر أدناه). في بعض الحالات، من الممكن أن تتجاوز الحصة المتاحة المقدار الفعلي للسعة التخزينية المتاحة.

فحص

أثناء التطوير، يمكنك استخدام أدوات مطوري البرامج في المتصفح لفحص أنواع التخزين المختلفة، ومحو جميع البيانات المخزنة بسهولة.

تمت إضافة ميزة جديدة في الإصدار 88 من Chrome تتيح لك إلغاء مساحة تخزين الموقع الإلكتروني. حصة التخزين في "مساحة التخزين". تتيح لك هذه الميزة محاكاة الأجهزة المختلفة واختبار سلوك تطبيقاتك في حالة توفُّر أقل على القرص والسيناريوهات. انتقِل إلى التطبيق ثم مساحة التخزين وفعِّل مربّع الاختيار محاكاة مساحة التخزين المخصّصة، وأدخِل أي رقم صالح لمحاكاة حصة التخزين.

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

كيف يمكن التعامل مع تجاوز الحصة؟

ما الذي يجب عليك فعله عند تجاوز الحصة؟ الأهم من ذلك، يجب عليك اكتشاف أخطاء الكتابة والتعامل معها دائمًا، سواء كانت QuotaExceededError أو شيء آخر. بعد ذلك، بناءً على تصميم التطبيق، حدد كيفية التعامل معه. على سبيل المثال، يمكنك حذف محتوى لم يتم الوصول إليه منذ فترة طويلة، البيانات حسب الحجم، أو توفر طريقة للمستخدمين لاختيار ما يريدون حذفه.

تعرض كل من IndexedDB وواجهة برمجة التطبيقات Cache API DOMError بالاسم QuotaExceededError عند تجاوز الحصة المتاحة.

IndexedDB

إذا تجاوز المصدر حصته، فستتخذ محاولات الكتابة إلى IndexedDB إخفاق. سيتم استدعاء معالج onabort() للمعاملة، ما يؤدي إلى اجتياز حدث. سيتضمّن الحدث DOMException في سمة الخطأ. جارٍ التحقق من خطأ: ستعرض الدالة name القيمة QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

واجهة برمجة تطبيقات ذاكرة التخزين المؤقت

يحاول المصدر الكتابة إلى Cache API إذا تجاوز المصدر حصته. سيتم رفضها باستخدام QuotaExceededError DOMException.

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

ما هي آلية عمل الإخلاء؟

يتم تصنيف مساحة تخزين الويب إلى مجموعتَين: "أفضل جهد". و"ثابت". ويعني بذل أفضل الجهود أنه يمكن للمتصفّح محو مساحة التخزين بدون الحاجة إلى مقاطعة المستخدم، ولكنها أقل متانة للبيانات طويلة المدى أو الحرجة. لا يتم محو مساحة التخزين الثابتة تلقائيًا عند انخفاض مساحة التخزين. المستخدِم محو مساحة التخزين هذه يدويًا (عبر إعدادات المتصفح).

وبشكلٍ تلقائي، تندرج بيانات الموقع الإلكتروني (بما في ذلك IndexedDB وذاكرة التخزين المؤقت لواجهة برمجة التطبيقات وما إلى ذلك) ضمن على أفضل فئة جهد، وهو ما يعني ما لم يتضمن الموقع طلب تخزين دائم، قد يزيل المتصفح بيانات الموقع الإلكتروني وفقًا لتقديرها الخاص، مثلاً، عندما تكون مساحة التخزين على الجهاز منخفضة.

في ما يلي سياسة الإخلاء لتحقيق أفضل جهد:

• ستبدأ المتصفحات المستندة إلى Chromium في إبعاد البيانات عند نفاد مساحة عمل المتصفّح من المساحة، مع محو كل بيانات الموقع من المصدر الأقل استخدامًا أولاً، ثم التالي، إلى أن يتجاوز المتصفح الحدّ الأقصى المسموح به
• لن يلغي Internet Explorer 10 أو الإصدارات الأحدث البيانات، ولكنه سيمنع المصدر من وكتابة أي شيء بعد ذلك.
• سيبدأ Firefox في التخلص من البيانات عند امتلاء مساحة القرص المتاحة، محو جميع بيانات الموقع الإلكتروني من المصدر الأقل استخدامًا أولاً، ثم بعد ذلك، إلى أن ينتهي المتصفّح من الحدّ الأقصى المسموح به.
• لم يزِل Safari أي بيانات سابقًا، ولكنه نفّذ مؤخرًا عملية الحد الأقصى لمدة سبعة أيام على جميع مساحة التخزين القابلة للكتابة (انظر أدناه).

بدءًا من نظامي التشغيل iOS وiPadOS 13.4 وSafari 13.1 على نظام التشغيل macOS، تتوفر حد أقصى لمدة سبعة أيام لجميع وحدات التخزين القابلة للكتابة للنص البرمجي، بما في ذلك IndexedDB والخدمة وتسجيل العمال وواجهة برمجة تطبيقات ذاكرة التخزين المؤقت. يعني هذا أن Safari يلغي جميع المحتوى من ذاكرة التخزين المؤقت بعد سبعة أيام من استخدام Safari إذا لم التفاعل مع الموقع. لا تسري سياسة التخلص هذه على التطبيقات المثبّتة. تطبيقات الويب التقدّمية (PWA) التي تمّت إضافتها إلى الشاشة الرئيسية عرض الحظر الكامل لملفات تعريف الارتباط التابعة لجهات خارجية والمزيد على WebKit للحصول على التفاصيل الكاملة.

ميزة إضافية: لماذا يتم استخدام برنامج تضمين لقاعدة البيانات المفهرسة

تُعد IndexedDB واجهة برمجة تطبيقات منخفضة المستوى تتطلب إعدادًا مهمًا قبل الاستخدام، وهو ما قد يكون صعبًا بشكل خاص لتخزين البيانات البسيطة. على عكس معظم أحدث تستند إلى الوعود، وتستند إلى الأحداث. برامج تضمين التعهد مثل idb لـ IndexedDB يتم إخفاء بعض الميزات الفعالة ولكن من المهم إخفاء الآلات المعقدة (على سبيل المثال، المعاملات، تعيين إصدارات المخطط) الذي يأتي مع مكتبة IndexedDB.

الخاتمة

اختفت أيام التخزين المحدود ومطالبة المستخدم بتخزين المزيد المزيد من البيانات. يمكن للمواقع أن تخزن بشكل فعال جميع الموارد والبيانات التي تحتاج إلى تشغيلها. باستخدام StorageManager API يمكنك لتحديد المقدار المتاح لك ومقدار ما استخدمته. وباستخدام سعة تخزين دائمة، ما لم يزيلها المستخدم، حمايتها من الطرد.

مراجع إضافية

• أفضل الممارسات في IndexedDB
• مفاهيم مساحة التخزين على الويب والحصص في Chrome

شكرًا

شكر خاص لكل من "جاريد غودمان" و"فيل والتون" و"إيجي كيتامورا" و"دانيال ميرفي" كل من "داروين هوانغ" و"جوش بيل" و"مارين كرويسلبرينك" و"فيكتور كوستان" لمراجعة هذه المقالة. بفضل "إيجي كيتامورا" و"آدي عثماني" و"مارك كوهين" الذين كتبوا المقالات الأصلية التي يستند إليها هذا. كتب إيجي أداة مفيدة يُسمى مُسيء استخدام مساحة التخزين في المتصفِّح والذي كان مفيدًا في التحقُّق السلوك الحالي. وهي تتيح لك تخزين أكبر قدر ممكن من البيانات حدود سعة التخزين في متصفحك. بفضل "فرانسوا بوفورت" الذي أنشأ البحث إلى Safari لمعرفة حدود سعتها التخزينية.

صورة الجزء الرئيسي من تصميم غيوم بولدوك على إلغاء البداية: