Mendengarkan Peristiwa Penyimpanan

Penyimpanan Web memicu peristiwa storage pada setiap tab lain dengan asal yang sama setiap kali localStorage berubah. Ini adalah cara paling sederhana untuk menjaga beberapa tab aplikasi yang terbuka tetap sinkron—misalnya, untuk menyebarkan proses keluar atau pergantian tema.

Pasang penangan pada window: window.addEventListener("storage", handleStorage). Pendengar hanya dipicu di tab atau jendela lain dengan asal yang sama—tidak pernah di tab yang melakukan perubahan itu sendiri karena tab tersebut sudah mengetahui pembaruannya.

Peristiwa tersebut membawa key (kunci yang berubah), oldValue dan newValue (teks atau null), url (halaman yang memicu perubahan), serta storageArea (objek Storage—localStorage atau sessionStorage).

Saat tab lain memanggil localStorage.clear(), peristiwa penyimpanan dipicu sekali dengan key === null dan oldValue serta newValue yang keduanya bernilai null. Kenali pola ini untuk menangani penghapusan massal secara terpisah dari pembaruan satu kunci.

Pemanggilan removeItem memicu peristiwa dengan newValue === null dan oldValue yang berisi teks sebelumnya. Bedakan "kunci dihapus" dari "kunci ditetapkan ke teks null" dengan memeriksa bahwa newValue benar-benar null, bukan teks "null".

Peristiwa tersebut tidak pernah dipicu di tab yang menulis perubahan. Untuk merespons penulisan Anda sendiri, kirimkan peristiwa khusus setelah setItem, atau bungkus setItem dalam pembantu yang memanggil API penyimpanan dan bus peristiwa dalam aplikasi.

Tetapkan kunci seperti auth:logout dengan cap waktu saat pengguna keluar. Tab lain mendengarkan kunci tersebut dalam peristiwa penyimpanan, lalu segera menghapus status sesi mereka sendiri dan mengarahkan pengguna ke halaman masuk tanpa perlu mengeklik lagi.

Saat pengguna mengganti tema di satu tab, tulis theme ke localStorage. Penangan penyimpanan di setiap tab lain membaca nilai baru tersebut dan menerapkan document.documentElement.dataset.theme—perubahan langsung terlihat di semua tab yang terbuka.

Satu penangan dapat melayani banyak fitur dengan membuat percabangan berdasarkan e.key. Pernyataan switch menjaga agar pengirim tetap mudah dibaca: setiap kasus menangani satu kunci penyimpanan dan mengabaikan perubahan yang tidak terkait yang ditulis fitur lain ke Storage yang sama.

sessionStorage berlaku per tab—penulisannya tidak pernah memicu peristiwa penyimpanan di tab lain karena setiap tab memiliki sessionStorage independen. Gunakan localStorage jika diperlukan pengiriman sinyal antar-tab, meskipun kunci tersebut langsung dihapus setelahnya.

Untuk pengiriman pesan antar-tab yang lebih kaya, API BroadcastChannel mengirim data terstruktur tanpa menyentuh penyimpanan: new BroadcastChannel("app").postMessage({ type: "logout" }). Gunakan BroadcastChannel untuk sinyal sementara dan peristiwa penyimpanan untuk status yang juga perlu tetap tersimpan.

Peristiwa penyimpanan mengirimkan pemberitahuan antar-tab setiap kali localStorage berubah di tab lain, beserta key, oldValue, newValue, dan storageArea. Peristiwa ini tidak dipicu di tab yang menulis, jadi gabungkan dengan peristiwa khusus untuk pengiriman lokal dan jarak jauh secara menyeluruh. Gunakan cara ini untuk menyebarkan proses keluar, menyinkronkan tema, dan menjaga konsistensi status di seluruh jendela browser.