Mam komponent React. Początkowo ustawiłem localStorage w UseEffect. Ponadto dodaję odbiornik zdarzeń. Po kliknięciu tekstu zmienia wartość localStorage, ale detektor zdarzenia nie uruchamia się, dlaczego?

import React, { useEffect } from "react";

export default function App() {

  useEffect(() => {
    window.localStorage.setItem("item 1", 'val 1');
    window.addEventListener('storage', () => {
      alert('localstorage changed!')
    })
  }, []);

  const getData = () => {
    localStorage.setItem("item", "val chamged");
  };

  return (
    <div className="App">
      <h1 onClick={getData}>Change localstorage value</h1>

    </div>
  );
}

https://codesandbox.io/s/naughty-engelbart-90tkw

2
Lukas 2 kwiecień 2020, 22:57

3 odpowiedzi

Najlepsza odpowiedź

Są dwie rzeczy źle.

  1. zmień onClick={getData()} onClick={getData}
  2. Z dokumentu (https://developer.mozilla.org/ pl-PL / docs / Web / API / Window / storage_event). The storage event of the Window interface fires when a storage area (localStorage or sessionStorage) has been modified in the context of another document. Zwróć uwagę na ostatnie zdanie, które mówi, że nie zostanie uruchomione w tym samym dokumencie. Możesz to zobaczyć, jeśli otworzysz https://codesandbox.io/s/spring-browser-89con na 2 kartach w tej samej przeglądarce, alert zacznie się pojawiać.
3
Subin Sebastian 2 kwiecień 2020, 20:26

Zdarzenie Storage jest wyzwalane, gdy następuje zmiana w obszarze przechowywania okna.

Uwaga: zdarzenie przechowywania jest wyzwalane tylko wtedy, gdy okno inne niż sama wprowadza zmiany.

Możesz zobaczyć więcej szczegółów i prezentację: wydarzenie dotyczące pamięci

Procedura obsługi zdarzenia storage będzie miała wpływ tylko na inne okna. Ilekroć coś się zmienia w jednym oknie wewnątrz localStorage, wszystkie inne okna są o tym powiadamiane i jeśli trzeba podjąć jakąś akcję, można to osiągnąć przez funkcję obsługi, która nasłuchuje zdarzenia storage.

3
Mohammad Oftadeh 2 kwiecień 2020, 20:29

Spróbuj z tym programem obsługi onclick

import React, { useEffect } from "react";

export default function App() {

  useEffect(() => {
    window.localStorage.setItem("item 1", 'val 1');
    window.addEventListener('storage', () => {
      alert('localstorage changed!')
    })
  }, []);

  const getData = () => {
    localStorage.setItem("item", "val chamged");
  };

  return (
    <div className="App">
      <h1 onClick={()=>getData()}>Change localstorage value</h1>

    </div>
  );
}
0
Kesav 2 kwiecień 2020, 20:32