การจัดการเหตุการณ์พื้นที่จัดเก็บระหว่างแท็บ

เมื่อผู้ใช้เปิดแอปของคุณในสองแท็บและอัปเดตค่าในแท็บ A แท็บ B ยังคงแสดงสถานะเก่าอยู่ แต่ละแท็บมีสถานะ React ของตัวเองในหน่วยความจำ แม้ว่าจะใช้ localStorage ร่วมกัน

หากไม่มีการประสานงาน แท็บต่าง ๆ จะมีความเห็นไม่ตรงกันเกี่ยวกับค่าปัจจุบัน

เบราว์เซอร์จะส่งเหตุการณ์ storage ไปยังแท็บอื่นของออริจินเดียวกันทุกครั้งที่ localStorage เปลี่ยนแปลง ที่สำคัญ เหตุการณ์นี้จะไม่ทำงานในแท็บที่เป็นผู้สร้างการเปลี่ยนแปลง

นี่คือสัญญาณที่แท็บ B ต้องใช้เพื่อทราบว่าแท็บ A ได้อัปเดตบางอย่าง

ใน useEffect ให้เรียกใช้ window.addEventListener('storage', handler) แล้วคืนค่าการล้างข้อมูลที่นำตัวรับฟังออก วิธีนี้จะสมัครรับการเปลี่ยนแปลงระหว่างแท็บให้กับคอมโพเนนต์

เอฟเฟกต์ควรทำงานครั้งเดียวตอนเริ่มแสดงผล ดังนั้นจึงควรใช้อาร์เรย์การพึ่งพาที่ว่างเปล่าหรือมีค่าคงที่

ออบเจ็กต์เหตุการณ์จะมี key ซึ่งระบุคีย์ที่เปลี่ยนแปลง oldValue และ newValue ซึ่งเป็นสตริงก่อนและหลังการเปลี่ยนแปลง และ storageArea ซึ่งเป็นออบเจ็กต์พื้นที่จัดเก็บที่ได้รับผลกระทบ

คีย์ที่เป็นค่าว่างพร้อมค่าที่เป็นค่าว่างหมายความว่าพื้นที่จัดเก็บข้อมูลถูกล้างทั้งหมด

เหตุการณ์พื้นที่จัดเก็บจะทำงานกับทุกคีย์ในออริจิน ดังนั้นตัวจัดการของคุณควรตรวจสอบ event.key === yourKey ก่อนตอบสนอง การเพิกเฉยต่อคีย์ที่ไม่เกี่ยวข้องช่วยหลีกเลี่ยงการแสดงผลใหม่โดยไม่จำเป็น

นอกจากนี้ควรจัดการกรณีที่ event.newValue เป็นค่าว่าง ซึ่งหมายความว่าคีย์นั้นถูกลบแล้ว

เมื่อมีการเปลี่ยนแปลงที่เกี่ยวข้องเข้ามา ให้แยกวิเคราะห์ event.newValue แล้วเรียกใช้ตัวตั้งค่าของคุณเพื่ออัปเดตสถานะ React วิธีนี้จะทำให้แท็บที่สองสอดคล้องกับการเปลี่ยนแปลงที่เกิดขึ้นในอีกแท็บ

เมื่อใช้ร่วมกับฮุก useLocalStorage วิธีนี้จะเชื่อมการทำงานระหว่างแท็บให้ครบวงจร

BroadcastChannel ช่วยให้แท็บของออริจินเดียวกันส่งข้อความถึงกันโดยตรงด้วย postMessage วิธีนี้สะอาดกว่าการอาศัยพ่วงกับเหตุการณ์พื้นที่จัดเก็บ และยังทำงานได้แม้ไม่ได้เขียนข้อมูลลง localStorage

คุณสร้างช่องทางด้วยชื่อหนึ่ง ส่งการอัปเดต และรับฟังเหตุการณ์ message

React มี useSyncExternalStore สำหรับสมัครรับข้อมูลจากพื้นที่จัดเก็บภายนอกอย่างปลอดภัยในสภาพการทำงานพร้อมกัน คุณสามารถเชื่อมฟังก์ชันการสมัครรับข้อมูลของฮุกนี้เข้ากับเหตุการณ์ storage และเชื่อมภาพสถานะเข้ากับการอ่าน localStorage ได้

วิธีนี้ผสานการอัปเดตจากพื้นที่จัดเก็บภายนอกเข้ากับการแสดงผลของ React ได้อย่างถูกต้อง

กรณีใช้งานที่พบได้บ่อยคือการออกจากระบบทุกที่ เมื่อแท็บหนึ่งล้างเครื่องหมายการยืนยันตัวตน เหตุการณ์พื้นที่จัดเก็บในแท็บอื่นจะตรวจพบการเปลี่ยนแปลงและนำผู้ใช้ไปยังหน้าล็อกอิน

วิธีนี้ป้องกันไม่ให้แท็บที่มีข้อมูลเก่าแสดงเนื้อหาสำหรับผู้ใช้ที่ยืนยันตัวตนแล้วต่อไป

ธีมก็เหมาะกับกรณีนี้เช่นกัน เมื่อสลับโหมดมืดในแท็บหนึ่ง ระบบจะเขียนค่าลง localStorage เหตุการณ์พื้นที่จัดเก็บจะทำงานในแท็บอื่น และแท็บเหล่านั้นจะอัปเดตสถานะธีมให้ตรงกันทันที

ผู้ใช้จะเห็นรูปลักษณ์ที่สอดคล้องกันไม่ว่าจะสลับไปใช้แท็บใด

การซิงค์ระหว่างแท็บประกอบด้วยการรับฟังเหตุการณ์ storage หรือใช้ BroadcastChannel การกรองให้เหลือคีย์ของคุณ และการอัปเดตสถานะ React จากค่าใหม่

สำหรับการสมัครรับข้อมูลที่ปลอดภัยและรองรับการทำงานพร้อมกันอย่างรัดกุม useSyncExternalStore คือตัวเลือกสมัยใหม่

ทดสอบความเข้าใจเกี่ยวกับเหตุการณ์ระหว่างแท็บ

คุณได้เรียนรู้ว่าเหตุการณ์ storage ทำงานในแท็บอื่น วิธีรับฟังเหตุการณ์ กรองตามคีย์ และอัปเดตสถานะ รวมถึงทางเลือกอย่าง BroadcastChannel และ useSyncExternalStore

คุณได้เห็นกรณีใช้งานจริง เช่น การออกจากระบบทุกแท็บและการซิงค์โหมดมืดระหว่างแท็บ