Sekmeler Arasında Depolama Olaylarını Yönetme

Bir kullanıcı uygulamanızı iki sekmede açık tutup A sekmesinde bir değeri güncellediğinde, B sekmesi hâlâ eski durumu gösterir. localStorage'ı paylaşmalarına rağmen her sekmenin bellekte kendine ait bir React durumu vardır.

Koordinasyon olmadan sekmeler geçerli değer konusunda farklı görüşte kalır.

Tarayıcı, localStorage değiştiğinde aynı kaynağın diğer sekmelerinde bir storage olayı gönderir. Önemli bir ayrıntı olarak, olay değişikliği yapan sekmede tetiklenmez.

Bu, B sekmesinin A sekmesinin bir şeyi güncellediğini öğrenmesi için tam olarak gereken sinyaldir.

Bir useEffect içinde window.addEventListener('storage', handler) çağrısını yapar ve olayı kaldıran bir temizleme işlevi döndürürsünüz. Böylece bileşen sekmeler arası değişikliklere abone olur.

Etki ilk eklemede bir kez çalışmalıdır; bu nedenle boş veya sabit bir bağımlılık dizisi uygundur.

Olay nesnesi; hangi anahtarın değiştiğini belirten key değerini, önceki ve sonraki dizeleri belirten oldValue ile newValue değerlerini ve etkilenen depolama nesnesini belirten storageArea değerini taşır.

Anahtarın ve değerlerin boş olması, depolamanın tamamen temizlendiği anlamına gelir.

Depolama olayı, kaynakta bulunan her anahtar için tetiklenir; bu nedenle işleyiciniz tepki vermeden önce event.key === yourKey kontrolünü yapmalıdır. İlgisiz anahtarları yok saymak gereksiz yeniden oluşturmaları önler.

Ayrıca event.newValue değerinin boş olduğu, yani anahtarın kaldırıldığı durumu da ele alın.

İlgili bir değişiklik geldiğinde event.newValue değerini ayrıştırın ve React durumunu güncellemek için ayarlama işlevinizi çağırın. Böylece ikinci sekme başka bir yerde yapılan değişiklikle eşitlenir.

Bu yaklaşım bir useLocalStorage kancasıyla birleştirildiğinde sekmeler arasındaki döngü tamamlanır.

BroadcastChannel, aynı kaynağın sekmelerinin postMessage ile doğrudan birbirlerine ileti göndermesini sağlar. Depolama olaylarını dolaylı olarak kullanmaktan daha temizdir ve localStorage'a yazmadan da çalışır.

Bir kanalı adlandırarak oluşturur, güncellemeleri gönderir ve message olaylarını dinlersiniz.

React, dış depolara eşzamanlı çalışmayla güvenli biçimde abone olmak için useSyncExternalStore sağlar. Abone olma işlevini storage olayına, anlık görüntüyü ise bir localStorage okumasına bağlayabilirsiniz.

Bu, dış depolama güncellemelerini React oluşturma süreciyle doğru biçimde bütünleştirir.

Klasik bir kullanım, her yerde oturumu kapatmaktır: bir sekme kimlik doğrulama işaretini temizlediğinde, diğer sekmelerdeki depolama olayı bunu algılar ve onları oturum açma ekranına yönlendirir.

Bu, güncel olmayan bir sekmenin kimliği doğrulanmış içeriği göstermeye devam etmesini önler.

Tema da bunun için çok uygundur: bir sekmede koyu modu açıp kapatmak localStorage'a yazma yapar, depolama olayı diğer sekmelerde tetiklenir ve bu sekmeler tema durumlarını anında eşleşecek şekilde günceller.

Kullanıcı hangi sekmeye geçerse geçsin tutarlı bir görünüm elde eder.

Sekmeler arası eşitleme; storage olayını dinlemeye veya BroadcastChannel kullanmaya, anahtarlarınızı filtrelemeye ve React durumunu yeni değerden güncellemeye dayanır.

Sağlam ve eşzamanlı çalışmayla güvenli abonelikler için useSyncExternalStore güncel seçimdir.

storage olayının diğer sekmelerde tetiklendiğini, nasıl dinleneceğini, anahtara göre nasıl filtreleneceğini ve durumun nasıl güncelleneceğini, ayrıca BroadcastChannel ile useSyncExternalStore seçeneklerini öğrendiniz.

Her yerde oturum kapatma ve sekmeler arası koyu mod gibi gerçek kullanım örneklerini gördünüz.