Bagaimana untuk Berkongsi Data Merentasi Tab Pelayar Menggunakan sessionStorage dan Pendengar Acara?

Berkongsi nilai sesiStorage Antara Tab Penyemak Imbas

Apabila menyimpan nilai sesi penyemak imbas untuk tapak web, sessionStorage sering digunakan untuk mengekalkan data sehingga penyemak imbas tertutup. Walau bagaimanapun, nilai ini diasingkan kepada tab individu, menjadikannya mencabar untuk berkongsi data merentas berbilang tab.

Memahami Isu

Bayangkan menyimpan nilai penting dalam sessionStorage, berniat untuk minta mereka boleh diakses merentas semua tab terbuka. Walau bagaimanapun, jika pengguna membuka tab baharu dan menavigasi ke halaman lain, nilai sessionStorage daripada tab sebelumnya tidak akan tersedia dalam tab baharu ini. Ini boleh menjadi masalah apabila anda ingin memastikan ketersediaan data yang konsisten dalam semua kejadian penyemak imbas yang aktif.

Penyelesaian: Memanfaatkan Pendengar Storan dan Acara setempat

Untuk berkongsi nilai sesiStorage antara tab , anda boleh menggunakan localStorage dan memanfaatkan pendengar acara "storage" untuk menyebarkan perubahan data antara tab. Kod ini harus dilaksanakan dalam semua tab aktif dan dilaksanakan sebelum skrip lain:

<code class="javascript">// Transfer sessionStorage data between tabs
var sessionStorage_transfer = function(event) {
  if (!event || !event.newValue) return;
  if (event.key == 'getSessionStorage') {
    // Send sessionStorage data to other tabs
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    localStorage.removeItem('sessionStorage');
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // Receive sessionStorage data from other tabs
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// Listen for changes to localStorage
window.addEventListener("storage", sessionStorage_transfer, false);

// Trigger the event to request sessionStorage data from other tabs
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};</code>

Cara ia Berfungsi

Kod ini mewujudkan saluran komunikasi antara tab menggunakan localStorage. Pendengar acara memantau perubahan dalam localStorage dan mengambil tindakan yang sesuai bergantung pada pencetus peristiwa. Apabila satu tab meminta data sessionStorage (dengan menetapkan 'getSessionStorage' dalam localStorage), tab lain bertindak balas dengan menghantar kandungan sessionStorage mereka sendiri. Tab penerima kemudian mengemas kini sessionStoragenya sendiri dengan data yang diterima, berkongsi nilai dengan berkesan merentas tab.

Keserasian Penyemak Imbas

Penyelesaian ini telah diuji dan serasi dengan penyemak imbas utama , termasuk Chrome, Firefox, Safari dan Internet Explorer 9 dan ke atas. Ambil perhatian bahawa IE8 mungkin memerlukan shim JSON untuk kefungsian penuh.

Kesimpulan

Dengan memanfaatkan localStorage dan pendengar acara, anda boleh berkongsi nilai sessionStorage dengan mudah antara tab penyemak imbas, memastikan konsisten ketersediaan data merentas berbilang contoh aplikasi anda. Teknik ini amat berguna untuk mengekalkan data sesi pengguna atau menyimpan nilai penting yang perlu boleh diakses dalam semua tetingkap penyemak imbas yang aktif.

Atas ialah kandungan terperinci Bagaimana untuk Berkongsi Data Merentasi Tab Pelayar Menggunakan sessionStorage dan Pendengar Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!