Menangani Peristiwa Penyimpanan Antar-Tab

Ketika pengguna membuka aplikasi Anda di dua tab dan memperbarui nilai di tab A, tab B masih menampilkan status lama. Setiap tab memiliki status React-nya sendiri di memori, meskipun keduanya berbagi localStorage.

Tanpa koordinasi, tab-tab tersebut tidak sepakat tentang nilai saat ini.

Peramban mengirimkan peristiwa storage pada tab lain dari asal yang sama setiap kali localStorage berubah. Yang penting, peristiwa ini tidak terpicu pada tab yang melakukan perubahan.

Inilah sinyal yang diperlukan tab B untuk mengetahui bahwa tab A telah memperbarui sesuatu.

Di dalam useEffect, Anda memanggil window.addEventListener('storage', handler) lalu mengembalikan fungsi pembersihan yang menghapusnya. Ini mendaftarkan komponen untuk menerima perubahan antartab.

Efek tersebut sebaiknya berjalan sekali saat komponen dipasang, sehingga larik dependensi kosong atau stabil sesuai digunakan.

Objek peristiwa membawa key (kunci yang berubah), oldValue dan newValue (teks sebelum dan sesudah perubahan), serta storageArea (objek penyimpanan yang terdampak).

Kunci null dengan nilai null berarti seluruh penyimpanan telah dihapus.

Peristiwa penyimpanan terpicu untuk setiap kunci dalam asal tersebut, jadi penangan Anda harus memeriksa event.key === yourKey sebelum bertindak. Mengabaikan kunci yang tidak terkait mencegah perenderan ulang yang tidak perlu.

Tangani juga keadaan ketika event.newValue bernilai null, yang berarti kunci tersebut telah dihapus.

Saat perubahan yang terkait diterima, uraikan event.newValue dan panggil fungsi pengatur Anda untuk memperbarui status React. Ini menyelaraskan tab kedua dengan perubahan yang dibuat di tempat lain.

Jika digabungkan dengan pengait useLocalStorage, cara ini menyelesaikan sinkronisasi antartab.

BroadcastChannel memungkinkan tab dari asal yang sama saling mengirim pesan secara langsung dengan postMessage. Cara ini lebih rapi daripada memanfaatkan peristiwa penyimpanan secara sampingan dan tetap berfungsi tanpa menulis ke localStorage.

Anda membuat saluran berdasarkan nama, mengirim pembaruan, dan mendengarkan peristiwa message.

React menyediakan useSyncExternalStore untuk berlangganan ke penyimpanan eksternal dengan cara yang aman dalam lingkungan konkuren. Anda dapat menghubungkan fungsi subscribe-nya ke peristiwa storage dan snapshot-nya ke pembacaan localStorage.

Ini mengintegrasikan pembaruan penyimpanan eksternal dengan benar ke dalam perenderan React.

Penerapan klasiknya adalah keluar dari semua sesi: ketika satu tab menghapus penanda autentikasi, peristiwa penyimpanan di tab lain mendeteksinya dan mengarahkan ulang tab-tab tersebut ke layar masuk.

Ini mencegah tab yang menampilkan data lama untuk terus menampilkan konten yang memerlukan autentikasi.

Tema juga sangat sesuai: mengaktifkan mode gelap di satu tab menulis ke localStorage, peristiwa penyimpanan terpicu di tab lain, lalu tab-tab tersebut segera memperbarui status temanya agar cocok.

Pengguna mendapatkan tampilan yang konsisten, tab mana pun yang dipilih.

Sinkronisasi antartab dilakukan dengan mendengarkan peristiwa storage (atau menggunakan BroadcastChannel), menyaring kunci Anda, dan memperbarui status React dari nilai baru.

Untuk langganan yang tangguh dan aman dalam lingkungan konkuren, useSyncExternalStore adalah pilihan modern.

Anda telah mempelajari bahwa peristiwa storage terpicu di tab lain, cara mendengarkannya, menyaring berdasarkan kunci, dan memperbarui status, serta alternatif BroadcastChannel dan useSyncExternalStore.

Anda juga telah melihat kasus penggunaan nyata seperti keluar dari semua sesi dan mode gelap antartab.