Question

我有React组件。最初，我在UseEffect中设置了一些localStorage。此外，我添加了事件监听器。单击文本后，它会更改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 Event

storage事件处理程序将仅影响其他窗口。每当localStorage内的一个窗口中发生任何更改时，所有其他窗口都会收到通知，并且如果需要采取任何措施，可以通过侦听storage事件的处理函数来实现。

Answer 2

有两件事是错误的。

更改men.tion._ (?<=(^|\W)@)(?<username>[\w\._]+)(?=(\.|\W))
来自文档（https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event）。 onClick={getData()}请注意，最后一句话说不会在同一文档中被触发。您可以看到，如果您在同一浏览器的2个标签中打开https://codesandbox.io/s/spring-browser-89con，警报将开始出现。

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>
  );
}

更改本地存储不会触发事件侦听器

3 个答案: