хранилище событий не работает вместе с любыми обновлениями localalstorage

Question

В моем componentDidMount я пытаюсь удалить элемент localalstorage, а также добавляю прослушиватель событий для дальнейших изменений в localalstorage, и он не работает

  componentDidMount() {
    localStorage.removeItem("receivedLocation");
    window.addEventListener("storage", event => {
      console.log("Event listener triggered");
      if (event.key === "receivedLocation" && event.newValue === true) {
        this.setState({
          receivedLocation: true
        });
      }
    });
  }

Тогда как, если я удаляю элемент обновления, он работает нормально .

  componentDidMount() {
    window.addEventListener("storage", event => {
      console.log("Event listener triggered");
      if (event.key === "receivedLocation" && event.newValue === true) {
        this.setState({
          receivedLocation: true
        });
      }
    });
  }

Я не могу сбросить локальное хранилище, а также прослушать будущие изменения в локальном хранилище

Answer 1

События хранения не запускаются в текущем документе . Он используется для уведомления других открытых вкладок вашего приложения о каких-либо изменениях.

Событие хранения интерфейса Window возникает, когда область хранения (localStorage или sessionStorage) была изменена в контексте другого document

Если вы пытаетесь уведомить другие компоненты на текущей вкладке, вы можете использовать DOMEvents для этого.

const event = new Event('EVENT_NAME', { detail: { yourPayload }});
window.dispatchEvent(event);

// in your component
window.addEventListener('EVENT_NAME', configChangedHandler, false);

// cleanup
window.removeEventListener('EVENT_NAME', configChangedHandler);