Изменение в локальном хранилище не вызывает прослушиватель событий

Question

У меня есть компонент React. Изначально я установил некоторый localStorage в UseEffect. Кроме того, я добавляю слушателя событий. После нажатия на текст он изменяет значение localStorage, но прослушиватель событий не запускается, почему?

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

Answer 1

Событие хранения инициируется, когда в области хранения окна происходит изменение.

Примечание: Событие хранения запускается только в том случае, если окно отличается от Сам вносит изменения.

Вы можете увидеть более подробную информацию и демонстрацию: Событие хранения

Обработчик события storage повлияет только на другие windows. Всякий раз, когда что-то изменяется в одном окне внутри localStorage, все остальные windows уведомляются об этом, и если необходимо предпринять какое-либо действие, это может быть достигнуто с помощью функции-обработчика, прослушивающей событие storage.

Answer 2

Есть две вещи не так.

1. изменить onClick={getData()} onClick={getData}
2. Из do c (https://developer.mozilla.org/en-US/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. Обратите внимание на последнее предложение, в котором говорится, что оно не будет запущено в том же документе. Вы можете видеть, что если вы откроете https://codesandbox.io/s/spring-browser-89con на 2 вкладках в одном браузере, оповещение начнет поступать.

Answer 3

Попробуйте с этим обработчиком 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>
  );
}