Contoh kode untuk mengimplementasikan komunikasi antar halaman menggunakan Storage Events

Kita semua tahu bahwa dua kondisi berikut harus dipenuhi untuk memicu window.onstorage:

• Simpan (perbarui) penyimpanan melalui localStorage.setItem atau sessionStorage.setItem
• Saat menyimpan (memperbarui) penyimpanan ini, nilai barunya harus berbeda dari nilai sebelumnya

Kondisi kedua di atas, sederhananya, adalah: inisialisasi penyimpanan, karena penyimpanan tidak ada, nilainya nol atau pembaruan penyimpanan yang ada.

Contoh:

 // Inisialisasi storagewindow.localStorage.setItem('a', 123); // Daftarkan event penyimpanan window.onstorage = (e) => { console.log(e);}; a', 123);

Baris kode terakhir di atas tidak memicu event onstorage, karena nilai a tidak berubah, yaitu 123 sebelum dan sesudahnya, sehingga browser menentukan bahwa pembaruan ini tidak valid.

Karena peristiwa onstorage dipicu oleh browser, jika kita membuka beberapa halaman dengan nama domain yang sama dan menjalankan metode window.localStorage.setItem pada salah satu halaman tersebut (kita juga harus memastikan bahwa item kedua yang disebutkan di awal artikel terpenuhi) kondisi), maka jika halaman lain mendengarkan event onstorage, callback event onstorage di halaman ini akan dieksekusi.

Contoh:

 // http://www.example.com/a.html<script>// Daftarkan acara penyimpanan window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/b.html<script>// Daftarkan acara penyimpanan window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/c.html<script>// Memicu peristiwa penyimpanan window.localStorage.setItem('a', new Date().getTime());</script>

Selama halaman c dipastikan dibuka setelah halaman a dan b (meskipun ketiga halaman tersebut tidak berada di jendela browser yang sama, Anda perlu membedakan perbedaan antara jendela dan halaman tab), maka peristiwa penyimpanan di halaman a dan b akan dipicu.

Sekarang kita tahu cara menggunakan peristiwa penyimpanan untuk mencapai komunikasi antar halaman, apa gunanya komunikasi ini bagi kita?

Faktanya, kita hanya perlu mengetahui operasi pembaruan penyimpanan mana yang memicu peristiwa onstorage. Callback event penyimpanan, seperti fungsi callback event lainnya, juga menerima parameter objek event. Ada tiga properti yang berguna dalam objek ini, yaitu:

• key Nama kunci penyimpanan yang sedang diinisialisasi atau diperbarui
• oldValue adalah nilai sebelum penyimpanan diinisialisasi atau diperbarui.
• newValue adalah nilai setelah penyimpanan diinisialisasi atau diperbarui

Menggabungkan 3 atribut utama ini, kita dapat mencapai sinkronisasi data antar halaman

Terakhir, izinkan saya menyebutkan perbedaan antara localStorage dan sessionStorage

Data yang disimpan di localStorage tidak memiliki pengaturan waktu kedaluwarsa, dan data yang disimpan di sessionStorage akan dihapus ketika sesi halaman berakhir.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.