Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Berkongsi Nilai SessionStorage Antara Tab Penyemak Imbas?

Bagaimana untuk Berkongsi Nilai SessionStorage Antara Tab Penyemak Imbas?

Barbara Streisand
Barbara Streisandasal
2024-10-21 15:25:30962semak imbas

How to Share SessionStorage Values Between Browser Tabs?

Nilai Storan Sesi perkongsian Antara Tab Penyemak Imbas

Storan sesi menyimpan data yang boleh diakses dalam satu tab penyemak imbas dan dikosongkan apabila tab ditutup. Walau bagaimanapun, terdapat keperluan untuk berkongsi nilai storan sesi antara tab untuk aplikasi tertentu.

Untuk mencapai matlamat ini, anda boleh menggunakan localStorage dan pendengar acara "storage"nya. Di bawah ialah coretan kod yang membolehkan pemindahan sessionStorage merentas tab:

<code class="javascript">// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
  if(!event) { event = window.event; } // ie suq
  if(!event.newValue) return;          // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' &amp;&amp; !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if(window.addEventListener) {
  window.addEventListener("storage", sessionStorage_transfer, false);
} else {
  window.attachEvent("onstorage", sessionStorage_transfer);
};


// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};</code>

Kod ini harus dilaksanakan pada semua tab dan dijalankan sebelum skrip lain.

Kaedah ini membenarkan nilai sessionStorage dipindahkan merentas tab dalam Chrome, Firefox, Safari, IE 11, IE 10 dan IE9. Dalam IE8, anda perlu memasukkan shim JSON untuk keserasian.

Dengan melaksanakan kod ini, anda boleh berkongsi nilai sessionStorage dengan berkesan antara tab, membenarkan aplikasi anda menyimpan data secara berterusan merentas berbilang tab dalam sesi penyemak imbas yang sama .

Atas ialah kandungan terperinci Bagaimana untuk Berkongsi Nilai SessionStorage Antara Tab Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn