JavaScript Academy · درس

أحداث التخزين وحدوده

استجيبوا للتغييرات والتزموا بحدود الحصة.

أحداث التخزين وحدوده درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

التفاعل مع تغييرات التخزين

يتيح حدث storage لعلامة تبويب التفاعل عند تغيير علامة تبويب أخرى لـ localStorage. وهذا يوفّر مزامنة بسيطة بين علامات التبويب.

الاستماع إلى storage

أضف مستمعًا إلى window. يُطلَق هذا المستمع في علامات التبويب الأخرى ذات الأصل نفسه كلما تغيّر localStorage، وليس في علامة التبويب التي أجرت التغيير.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

كائن StorageEvent

يحمل الحدث الخصائص key وoldValue وnewValue وstorageArea وurl. وتصف هذه الخصائص معًا ما تغيّر بدقة.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

يُطلَق في علامات التبويب الأخرى فقط

هناك نقطة دقيقة مهمة: لا يُطلَق الحدث في علامة التبويب نفسها التي استدعت setItem. فهو مخصص لإبلاغ علامات التبويب الأخرى، لذا لا تعتمد عليه لتحديثات علامة التبويب نفسها.

نمط المزامنة بين علامات التبويب

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

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

اكتشاف clear()

عند تشغيل clear()، يُطلَق الحدث مع تعيين key إلى null. عالج هذه الحالة لإعادة ضبط كل شيء.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

حصة التخزين

يحصل كل أصل على سعة محدودة، تبلغ عادةً نحو 5MB إجمالًا لـ localStorage. وهذه السعة أصغر بكثير من سعة IndexedDB، لذا لا تخزّن إلا كميات محدودة.

أخطاء تجاوز الحصة

يؤدي تجاوز الحصة إلى طرح QuotaExceededError عند استدعاء setItem. احرص دائمًا على إحاطة عمليات الكتابة الكبيرة أو غير الموثوقة بكتلة try/catch.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

تُحتسب UTF-16 بضعف الحجم

تُخزَّن السلاسل النصية بترميز UTF-16، لذا يستهلك كل محرف نحو بايتين. وتتسع حصة تبلغ 5MB لنحو 2.5 مليون محرف، ويقل العدد مع النصوص غير ASCII.

تقدير الاستخدام

يمكنك قياس الاستخدام تقريبيًا بجمع أطوال المفاتيح والقيم. لا توجد واجهة برمجة تطبيقات دقيقة لذلك، لكن هذا يمنحك تقديرًا عمليًا.

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

متى تستخدم شيئًا أكبر

بالنسبة إلى البيانات الكبيرة أو المنظمة التي تتجاوز بضعة MB، استخدم IndexedDB. يُفضَّل Web Storage للعلامات الصغيرة والتفضيلات والرموز.

تحقق سريع

أحداث التخزين وحدوده.

مراجعة

يُبلغ حدث storage علامات التبويب الأخرى في الأصل عن تغييرات localStorage، ويحمل key وoldValue وnewValue، وتكون قيمة key هي null عند استخدام clear. تبلغ الحصص نحو 5MB، وتؤدي الكتابة التي تتجاوزها إلى طرح QuotaExceededError، لذا أحط عمليات الكتابة المحفوفة بالمخاطر بكتلة try/catch واستخدم IndexedDB للبيانات الأكبر.

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

هل درس «أحداث التخزين وحدوده» مجاني؟

نعم — نص درس «أحداث التخزين وحدوده» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «أحداث التخزين وحدوده»؟

استجيبوا للتغييرات والتزموا بحدود الحصة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «أحداث التخزين وحدوده»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy