Wie teile ich Daten über Browser-Registerkarten hinweg mithilfe von sessionStorage und Event-Listenern?

SessionStorage-Werte zwischen Browser-Registerkarten teilen

Beim Speichern von Browser-Sitzungswerten für eine Website wird sessionStorage häufig verwendet, um Daten aufzubewahren, bis der Browser geöffnet ist geschlossen. Allerdings sind diese Werte auf einzelne Registerkarten beschränkt, was es schwierig macht, Daten über mehrere Registerkarten hinweg zu teilen.

Verstehen des Problems

Stellen Sie sich vor, wichtige Werte in sessionStorage zu speichern, und zwar mit der Absicht Machen Sie sie über alle geöffneten Registerkarten zugänglich. Wenn ein Benutzer jedoch eine neue Registerkarte öffnet und zu einer anderen Seite navigiert, sind die sessionStorage-Werte der vorherigen Registerkarte in dieser neuen Registerkarte nicht verfügbar. Dies kann zu einem Problem werden, wenn Sie eine konsistente Datenverfügbarkeit in allen aktiven Browserinstanzen sicherstellen möchten.

Lösung: Nutzung von localStorage und Event-Listenern

Um sessionStorage-Werte zwischen Tabs zu teilen , können Sie localStorage verwenden und seinen „Storage“-Ereignis-Listener nutzen, um Datenänderungen zwischen Registerkarten weiterzugeben. Dieser Code sollte in allen aktiven Tabs implementiert und vor anderen Skripten ausgeführt werden:

<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>

So funktioniert es

Dieser Code stellt mithilfe von localStorage einen Kommunikationskanal zwischen Tabs her. Der Ereignis-Listener überwacht Änderungen in localStorage und ergreift je nach Ereignisauslöser entsprechende Maßnahmen. Wenn eine Registerkarte SessionStorage-Daten anfordert (durch Festlegen von „getSessionStorage“ in localStorage), reagieren andere Registerkarten, indem sie ihren eigenen SessionStorage-Inhalt senden. Der empfangende Tab aktualisiert dann seinen eigenen SessionStorage mit den empfangenen Daten und teilt so Werte effektiv über Tabs hinweg.

Browserkompatibilität

Diese Lösung wurde getestet und ist mit den wichtigsten Browsern kompatibel , einschließlich Chrome, Firefox, Safari und Internet Explorer 9 und höher. Beachten Sie, dass IE8 möglicherweise einen JSON-Shim für die volle Funktionalität erfordert.

Fazit

Durch die Nutzung von localStorage und Event-Listenern können Sie SessionStorage-Werte problemlos zwischen Browser-Registerkarten teilen und so die Konsistenz sicherstellen Datenverfügbarkeit über mehrere Instanzen Ihrer Anwendung hinweg. Diese Technik ist besonders nützlich, um Benutzersitzungsdaten zu verwalten oder wichtige Werte zu speichern, die in allen aktiven Browserfenstern zugänglich sein müssen.

Das obige ist der detaillierte Inhalt vonWie teile ich Daten über Browser-Registerkarten hinweg mithilfe von sessionStorage und Event-Listenern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!