storage event — cross-tab playground

<div class="pg">
    <h1 class="pg-title">🎮 Does this tab know it logged itself out?</h1>
    <p class="pg-sub">
      This demo needs a <strong>real second browser tab</strong> — open one below, then log out
      from either tab and watch which one notices on its own.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> This tab</div>
      <p><span class="tab-badge"><span class="sw"></span><span id="tabId">tab-????</span></span> — every open copy of this page gets its own id.</p>
      <div class="status-big" id="statusBig"><span class="emoji">⏳</span><span id="statusText">Reading saved state…</span></div>
      <div class="btn-row-wrap">
        <button class="btn bad sm" id="logoutBtn">Log out</button>
        <button class="btn good sm" id="loginBtn">Log back in</button>
        <button class="btn ghost sm" id="openTabBtn">Open a second tab →</button>
      </div>
      <label class="toggle" style="margin-top:12px">
        <input type="checkbox" id="fixToggle" /><span class="switch"></span>
        <span>Apply the fix — call the handler locally right after writing</span>
      </label>
      <p class="hint" id="fixHint">
        Off: this tab only updates its own status from a <code>storage</code> event — and that event
        never fires in the tab that made the change.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What this tab has seen</div>
      <div class="output log" id="log" style="max-height: 220px; overflow:auto;"></div>
      <p class="hint late-join">
        Open a <em>third</em> tab anytime, even minutes after a logout happens elsewhere — it will
        show the correct status immediately, because it reads <code>localStorage</code> directly on
        load. It never needed to "hear" the change at all.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.