Javascript 存储事件侦听器没有'；无法在当前窗口上执行

我有一个angular 8+应用程序，我正在尝试使用localstorage和sessionstorage。侦听会话存储或本地存储更改。由于其角度不同，我正在使用事件管理器类：

constructor( private elementRef: ElementRef, private eventManager: EventManager) {
    this.eventManager.addGlobalEventListener('window', 'storage', () => {
      console.log('Event listener.....');
    });
}

---

当输入会话存储集项时，不执行上述函数。它仅在我转到

DevTools->Application->Storage

然后删除该项时执行。我在某个地方读到，它不执行的原因是它无法在当前浏览器选项卡/当前窗口上执行。当单击按钮时，是否有方法使事件侦听器在当前窗口或浏览器选项卡上执行？我使用的是Chrome浏览器。

我可以想出一个解决方案，比如在

localStorage

对象上创建一个服务包装器，并使用

EventManager

跟踪其他选项卡上的localStorage更改

本地存储服务

@可注入({
提供于：“根”
})
导出类LocalStorageService{
私有更改=新的EventEmitter（）；
构造函数（私有eventManager:eventManager）{
this.eventManager.addGlobalEventListener(
“窗口”，
“存储”，
（{key，oldValue，newValue}）=>{
如果（键）{//，则表示已设置新项
这个({
类型：localStorageAction.set，
钥匙
oldValue，
新价值
});
}else{//如果key为null，则表示本地存储被清除
这个({
类型：localStorageAction.clear
});
}
}
);
}
订阅（处理程序）{
返回此.change.subscribe（处理程序）；
}
清除（）{
localStorage.clear（）；
这个({
类型：localStorageAction.clear
});
}
getItem（键：字符串）{
返回localStorage.getItem（键）；
}
键（索引：编号）{
返回localStorage.key（索引）；
}
获取长度（）{
返回localStorage.length；
}
removeItem（键：字符串）{
localStorage.removietem（键）；
这个({
类型：localStorageAction.remove，
钥匙
});
}
setItem（键：字符串、值）{
const oldValue=localStorage.getItem（“key”）；
setItem（键、值）；
这个({
类型：localStorageAction.set，
钥匙
oldValue，
newValue:value
});
}
}

现在，通过该服务，您可以跟踪更改，如设置、删除项目、清除

演示