التعامل مع أحداث التخزين بين علامات التبويب

عندما يفتح المستخدم تطبيقكم في علامتي تبويب ويحدّث قيمة في علامة التبويب A، تظل علامة التبويب B تعرض الحالة القديمة. فلكل علامة تبويب حالة React خاصة بها في الذاكرة، رغم اشتراكها في localStorage.

من دون تنسيق، تختلف علامات التبويب حول القيمة الحالية.

يرسل المتصفح حدث storage إلى علامات التبويب الأخرى ذات origin نفسه كلما تغير localStorage. والأهم أنه لا يُطلق في علامة التبويب التي أجرت التغيير.

وهذه هي الإشارة التي تحتاج إليها علامة التبويب B لمعرفة أن علامة التبويب A حدّثت شيئًا.

داخل useEffect تستدعون window.addEventListener('storage', handler) وتُرجعون دالة تنظيف تزيله. ويشترك ذلك بالمكوّن في تغييرات التخزين بين علامات التبويب.

ينبغي أن يُنفذ التأثير مرة واحدة عند التركيب، لذا تكون مصفوفة التبعيات الفارغة أو المستقرة مناسبة.

يحمل كائن الحدث key (المفتاح الذي تغير)، وoldValue وnewValue (السلسلتان النصيتان قبل التغيير وبعده)، وstorageArea (كائن التخزين المتأثر).

يشير مفتاح null مع قيم تساوي null إلى مسح التخزين بالكامل.

يُطلق حدث storage لكل مفتاح في origin، لذلك ينبغي أن يتحقق معالجكم من event.key === yourKey قبل الاستجابة. ويؤدي تجاهل المفاتيح غير المرتبطة إلى تجنب عمليات إعادة التصيير غير الضرورية.

عالجوا أيضًا الحالة التي تكون فيها event.newValue مساوية لـ null، ما يعني أن المفتاح أُزيل.

عند وصول تغيير ذي صلة، حللوا event.newValue واستدعوا دالة الضبط لتحديث حالة React. وبذلك تصبح علامة التبويب الثانية متزامنة مع التغيير الذي أُجري في مكان آخر.

وبدمج ذلك مع خطاف useLocalStorage، تكتمل حلقة المزامنة بين علامات التبويب.

يتيح BroadcastChannel لعلامات التبويب ذات origin نفسه إرسال رسائل مباشرة إلى بعضها باستخدام postMessage. وهو أنظف من الاستفادة غير المباشرة من أحداث التخزين، ويعمل حتى من دون الكتابة إلى localStorage.

تنشئون قناة باسم، وتنشرون التحديثات، وتستمعون إلى أحداث message.

يوفر React الخطاف useSyncExternalStore للاشتراك في مخازن خارجية بطريقة آمنة مع التزامن. ويمكنكم ربط دالة الاشتراك فيه بحدث storage، وربط اللقطة بقراءة من localStorage.

يدمج ذلك تحديثات التخزين الخارجية مع تصيير React بطريقة صحيحة.

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

يمنع هذا علامة تبويب قديمة من الاستمرار في عرض محتوى يتطلب المصادقة.

تُعد السمة مناسبة لهذا الغرض أيضًا: فعند تفعيل الوضع الداكن في إحدى علامات التبويب، تُكتب القيمة في localStorage، ويُطلق حدث التخزين في العلامات الأخرى، فتحدّث حالة السمة لديها لتطابقها فورًا.

ويحصل المستخدم على مظهر متسق مهما كانت علامة التبويب التي ينتقل إليها.

تتمثل مزامنة علامات التبويب في الاستماع إلى حدث storage (أو استخدام BroadcastChannel)، وتصفية المفاتيح الخاصة بكم، وتحديث حالة React من القيمة الجديدة.

وللاشتراكات القوية والآمنة مع التزامن، يُعد useSyncExternalStore الخيار الحديث.

اختبروا مدى فهمكم لأحداث علامات التبويب.

تعلمتم أن حدث storage يُطلق في علامات التبويب الأخرى، وكيفية الاستماع إليه وتصفية الأحداث حسب المفتاح وتحديث الحالة، بالإضافة إلى بديلَي BroadcastChannel وuseSyncExternalStore.

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