Close dialogs in two browser tabs

I have application where user, when not using application, gets session timeout dialog with countdown. When countdown is at 0, user is logged out and all dialogs are closed. When user closes dialog before time has expired the timeout time is reset.
Now, when user has two or more browser tabs opened, then timeout warning and log out is happening at the same time, which is what is needed.

Problems come when user has two browser tabs opened with my application, gets session timeout and wants to continue to work. When clicking to continue in one tab, that button is clicked, the session timeout warning dialog closes, in other tab dialog stays opened, but timer has reset.

Question is, can I close dialog in all tabs with just clicking close in one of the tabs?

I am using ng-idle for session timeout if it helps.

Also, I created my own storage service, which watches localStorage changes, from which I can get if dialog has been closed in one of the tabs. With this piece of code I get localStorage changes in both tabs, with subscribing to watchStorage and setting item. But when setting item with a click on closing session timeout dialog it gets changes on one tab, but not others.

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

}

42 thoughts on “Close dialogs in two browser tabs”

Leave a Comment