Question

说，有两个标签打开了同一个网页。 在一个标签页上，我在localStorage中进行了一些更改，然后，当我转到其他标签页时，我希望看到更改而无需重新加载页面。

我认为这样做的一种方法是使用setInterval方法，但对于我的应用程序，我并不需要每3-5秒检查一次更新，所以我不觉得这种方法很理想。

我正在使用React。 TLDR：打开以前加载的网页的标签后，是否有更好的方法来更新数据？

对于iOS人员的旁注：在iOS上，有viewDidLoad方法（根据我的理解类似于componentDidMount），并且有一个viewDidAppear方法（所以我是基本上，要求viewDidAppear的React / JS版本？）

关于可能的重复问题：对我而言，它看起来相当不同，而且这个问题更多是针对React.js的。

Answer 1

您可以使用jQuery并收听localStorage on-change事件：

 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

这样，一旦本地存储中的某个键发生更改，您就可以在第二个选项卡中进行反映。

如果您正在使用react，那么请确保您在主要组件的render（）函数中渲染组件，该组件使用了您的主要组件{{1}对象。一旦本地存储发生变化，相应地更新state并做出反应将处理剩下的事情。

Answer 2

使用页面可见性api或只是窗口的焦点事件。我建议将备份计时器设置为一分钟左右......这些事件可能很糟糕。

除了binding to global events之外，没有任何具体的反应。

Answer 3

我在主要组件中添加了以下代码行。

在componentDidMount中：

document.addEventListener("visibilitychange", this._callbackFunc, false);

在componentWillUnmount中：

document.removeEventListener("visibilitychange", this._callbackFunc, false);