Håndtering af storage-hændelser på tværs af faner

Når en bruger har din app åben i to faner og opdaterer en værdi i fane A, viser fane B stadig den gamle tilstand. Hver fane har sin egen React-tilstand i hukommelsen, selv om de deler localStorage.

Uden koordinering er fanerne uenige om den aktuelle værdi.

Browseren udløser en storage-hændelse på andre faner med samme origin, hver gang localStorage ændres. Det er vigtigt, at hændelsen ikke udløses i den fane, der foretog ændringen.

Det er præcis det signal, fane B har brug for, for at opdage at fane A har opdateret noget.

I en useEffect kalder du window.addEventListener('storage', handler) og returnerer en oprydningsfunktion, der fjerner lytteren. Det abonnerer komponenten på ændringer på tværs af faner.

Effekten bør køre én gang ved montering, så et tomt eller stabilt afhængighedsarray er passende.

Hændelsesobjektet indeholder key (hvilken nøgle der blev ændret), oldValue og newValue (strengene før og efter) samt storageArea (det berørte lagerobjekt).

En null-nøgle med null-værdier betyder, at hele lageret blev ryddet.

Storage-hændelsen udløses for hver nøgle på originen, så din handler bør kontrollere event.key === yourKey, før den reagerer. Ved at ignorere irrelevante nøgler undgår du unødvendige rendering-opdateringer.

Håndter også tilfældet, hvor event.newValue er null, hvilket betyder, at nøglen blev fjernet.

Når en relevant ændring ankommer, skal du parse event.newValue og kalde din setter for at opdatere React-tilstanden. Det bringer den anden fane i overensstemmelse med ændringen, der blev foretaget et andet sted.

Sammen med en useLocalStorage-hook lukker det kredsløbet mellem fanerne.

BroadcastChannel giver faner med samme origin mulighed for at sende meddelelser direkte til hinanden med postMessage. Det er renere end at bruge storage-hændelser som mellemled og fungerer også uden at skrive til localStorage.

Du opretter en kanal med et navn, sender opdateringer og lytter efter message-hændelser.

React stiller useSyncExternalStore til rådighed til abonnementer på eksterne datalagre på en måde, der er sikker ved samtidig rendering. Du kan koble dens subscribe-funktion til storage-hændelsen og dens snapshot-funktion til en læsning fra localStorage.

Det integrerer opdateringer fra eksternt lager korrekt med React-rendering.

Et klassisk scenarie er at logge ud overalt: Når én fane rydder godkendelsesflaget, registrerer storage-hændelsen i de andre faner det og omdirigerer dem til login-skærmen.

Det forhindrer en forældet fane i fortsat at vise godkendt indhold.

Et tema er et andet godt eksempel: Når mørk tilstand slås til eller fra i én fane, skrives det til localStorage, storage-hændelsen udløses i de andre, og de opdaterer straks deres tematilstand, så den passer.

Brugeren får et ensartet udseende, uanset hvilken fane du skifter til.

Synkronisering på tværs af faner består i at lytte efter storage-hændelsen eller bruge BroadcastChannel, filtrere efter dine nøgler og opdatere React-tilstanden ud fra den nye værdi.

Til robuste abonnementer, der er sikre ved samtidig rendering, er useSyncExternalStore det moderne valg.

Du har lært, at storage-hændelsen udløses i andre faner, hvordan du lytter efter den, filtrerer efter nøgle og opdaterer tilstanden, samt hvilke alternativer BroadcastChannel og useSyncExternalStore tilbyder.

Du har set virkelige brugsscenarier som at logge ud overalt og synkronisere mørk tilstand på tværs af faner.