HTML Academy · درس

الاستماع إلى أحداث التخزين

التفاعل مع تغييرات التخزين بين علامات التبويب باستخدام حدث storage

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

التواصل بين علامات التبويب

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

تسجيل مستمع

أرفق المعالج بـ window: window.addEventListener("storage", handleStorage). لا يعمل المستمع إلا في علامات التبويب أو النوافذ الأخرى ذات الأصل نفسه، ولا يعمل مطلقًا في علامة التبويب التي نفّذت التغيير، لأنها تعرف بالتحديث مسبقًا.

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

خصائص StorageEvent

يحمل الحدث key (المفتاح الذي تغيّر)، وoldValue وnewValue (سلسلتان نصيتان أو null)، وurl (الصفحة التي تسببت في التغيير)، وstorageArea (كائن Storage، أي localStorage أو sessionStorage).

يضبط clear() المفتاح على null

عندما تستدعي علامة تبويب أخرى localStorage.clear()، يُطلق حدث التخزين مرة واحدة مع key === null، وتكون كل من oldValue وnewValue بقيمة null. اكتشف هذا النمط للتعامل مع المسح الشامل بشكل منفصل عن تحديثات المفتاح الواحد.

سلوك removeItem

يُطلق استدعاء removeItem الحدث مع newValue === null، بينما يحتفظ oldValue بالسلسلة النصية السابقة. ميّز بين حذف المفتاح وتعيين المفتاح إلى السلسلة النصية "null" من خلال التحقق من أن newValue يساوي null فعليًا، وليس السلسلة النصية "null".

قيد علامة التبويب نفسها

لا يُطلق الحدث مطلقًا في علامة التبويب التي كتبت التغيير. وللاستجابة لعمليات الكتابة التي ينفذها الكود نفسه، أطلق حدثًا مخصصًا بعد setItem، أو غلّف setItem في دالة مساعدة تستدعي كلًا من Storage API وناقل الأحداث داخل التطبيق.

function setItem(key, val) {
  localStorage.setItem(key, val);
  window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}

تسجيل الخروج بين علامات التبويب

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

مزامنة السمة والتفضيلات

عندما يبدّل المستخدم السمة في إحدى علامات التبويب، اكتب theme في localStorage. يقرأ معالج التخزين في كل علامة تبويب أخرى القيمة الجديدة ويطبّق document.documentElement.dataset.theme، فيظهر التغيير فورًا في جميع علامات التبويب المفتوحة.

التصفية حسب المفتاح

يمكن لمعالج واحد خدمة ميزات متعددة من خلال التفريع بناءً على e.key. ويحافظ بيان switch على قابلية قراءة الموزّع؛ إذ تتعامل كل حالة مع مفتاح تخزين واحد وتتجاهل التغييرات غير المتعلقة بها التي تكتبها الميزات الأخرى في Storage نفسه.

لا يعبر sessionStorage علامات التبويب

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

بديل BroadcastChannel

لإجراء مراسلة أغنى بين علامات التبويب، ترسل BroadcastChannel بيانات مهيكلة من دون لمس التخزين: new BroadcastChannel("app").postMessage({ type: "logout" }). استخدم BroadcastChannel للإشارات المؤقتة، وأحداث التخزين للحالة التي تحتاج أيضًا إلى الاستمرار.

اختبار المعرفة

إذا استدعت علامة التبويب A الأمر localStorage.setItem("theme", "dark")، فما علامات التبويب التي تتلقى حدث التخزين؟

ملخص

يوفّر حدث التخزين إشعارات بين علامات التبويب كلما تغيّر localStorage في علامة تبويب أخرى، ويحمل key وoldValue وnewValue وstorageArea. ولا يُطلق في علامة التبويب التي نفذت الكتابة، لذا ادمجه مع حدث مخصص لتوزيع كامل محلي وعن بُعد. استخدمه لنشر تسجيل الخروج ومزامنة السمة وأي حالة ينبغي أن تظل متسقة بين نوافذ المتصفح.

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

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

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

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

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

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

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

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

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

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

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

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

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