Kita semua tahu bahwa dua kondisi berikut harus dipenuhi untuk memicu window.onstorage:
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:
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.