在两个浏览器选项卡中关闭对话框答案

【问题标题】：Close dialogs in two browser tabs在两个浏览器选项卡中关闭对话框
【发布时间】：2021-01-27 08:00:23
【问题描述】：

我有一个应用程序，用户在不使用应用程序时，会获得带有倒计时的会话超时对话框。当倒计时为 0 时，用户退出并关闭所有对话框。当用户在时间到期之前关闭对话框时，超时时间将被重置。现在，当用户打开两个或多个浏览器选项卡时，会同时发生超时警告和注销。

当用户在我的应用程序中打开了两个浏览器选项卡、会话超时并希望继续工作时，就会出现问题。在一个选项卡中单击以继续时，单击该按钮，会话超时警告对话框关闭，在其他选项卡对话框保持打开状态，但计时器已重置。

问题是，我可以通过单击其中一个选项卡中的关闭来关闭所有选项卡中的对话框吗？

如果有帮助，我将使用 ng-idle 进行会话超时。

另外，我创建了自己的存储服务，它监视 localStorage 的变化，如果对话框已在其中一个选项卡中关闭，我可以从中获取。使用这段代码，我在两个选项卡中都获得了 localStorage 更改，订阅了 watchStorage 和设置项目。但是，当通过单击关闭会话超时对话框设置项目时，它会在一个选项卡上发生变化，而不是其他选项卡。

@Injectable({ providedIn: 'root' })
export class StorageService {
private storageSub = new Subject<string>();

watchStorage(): Observable<any> {
    return this.storageSub.asObservable();
}

setItem(key: string, data: any): void {
    localStorage.setItem(key, data);
    this.storageSub.next(JSON.parse(localStorage.getItem(key)));
}

}

【问题讨论】：

标签： javascript angular typescript angular-material

【解决方案1】：

基本上，订阅存储 observable 不起作用，因为我没有想到每个选项卡都会创建新的 Angular 实例，这就是为什么它对一个选项卡有效，而对另一个选项卡无效。为了解决这个问题，我只使用简单的事件监听器进行存储，并检查键和值来调用函数以关闭对话框。这是它的外观：

watchStorage(key: string, triggerValue: string, callback: () => {}): void {
    window.addEventListener('storage', event => {
        if (event.key === key && event.newValue === triggerValue) {
            callback();
        }
    });
}

【讨论】：