Cross-Tab-Kommunikation mit localStorage
Kommentare

Wir alle kennen das Problem: Wir haben eine Applikation, bei der sich der User einloggen kann. Anschließend öffnet er Teile der Applikation in einem zweiten Tab, loggt sich dort aus und … tja, was dann? Im ersten sieht er noch immer die Applikation im angemeldeten Status. Wäre es nicht schön, wenn er dort bereits wieder den Login-Screen zu Gesicht bekäme?

Eine überraschend einfache Lösung zur Cross-Tab-Kommunikation liegt in localStorage, wie Nicolas Bevacqua in seinem aktuellen Blogpost vorstellt.

Cross-Tab-Kommunikation

Für die Kommunikation zwischen verschiedenen Tabs eines Browsers gibt es einige Ansätze. Da wäre zum einen das SharedWorker API, das zwar mittlerweile im Chrome und im Firefox verfügbar ist, jedoch noch nicht im Safari oder im Internet Explorer. Eine weitere Möglichkeit wäre natürlich der Einsatz des WebSocket APIs, das – für das simple, eingangs erwähnte Szenario – viel zu mächtig wäre.

Bevacqua recherchierte ein wenig und kam auf die Idee, mit localStorage beim Login einen Wert in die Datenbank zu schreiben und periodisch zu überprüfen, ob der Wert, der beim Logout gelöscht werden würde, noch vorhanden ist. Wie es sich herausstellte, lässt sich die Anforderung wesentlich leichter mit localStorage erfüllen als zunächst gedacht.

localStorage feuert Events

Erfreulicherweise feuert localStorage ein Event, wenn etwas hinzugefügt, modifiziert oder gelöscht wird. Egal in welchem Kontext das geschieht, kann in jedem Tab auf dieses Event reagiert werden. Mit wenigen Handgriffen ist es so nun möglich, über Tab-Grenzen hinweg beispielsweise auf ein Logout zu reagieren.

Obwohl das localStorage-API einfach zu handeln ist, gibt es einige Schwachstellen, wie beispielsweise der fehlende JSON-Support oder der fehlende Support in älteren Browsern.

Um diese Probleme zu umgehen, hat Bevacqua mit local-storage ein relativ simples API geschrieben, das auf GitHub zur Verfügung steht. Es bietet unter anderem einen Fallback für den Fall, dass das localStorage-API nicht zur Verfügung steht und bietet darüber hinaus die Möglichkeit, Listener auf spezielle, vom Entwickler definierte Keys zu registrieren.

Mit dieser Methode lässt sich leicht und unkompliziert innerhalb einer Applikation auf Aktionen über verschiedene Tabs hinweg reagieren, ohne mit Kanonen auf Spatzen schießen zu müssen. Und das Beste daran: es funktioniert auch offline.

Aufmacherbild: businessmen talking on a homemade can phone von Shutterstock / Urheberrecht: JrCasas

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -