存储事件侦听器不在当前窗口上执行

Question

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

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

当i会话存储集项时，不执行上述功能。它仅在我转到CCD_ 1然后移除该项目时执行。我在某个地方读到，它没有执行的原因是因为它无法在当前浏览器选项卡/当前窗口上执行。单击按钮时，是否有一种方法可以使事件侦听器在当前窗口或浏览器选项卡上执行？我正在使用Chrome浏览器。

Answer 1

我可以想到这样的解决方案，比如在localStorage对象上创建一个服务包装，并使用EventManager跟踪其他选项卡上的localStorage更改

本地存储服务

@Injectable({
providedIn: "root"
})
export class LocalStorageService {
private change = new EventEmitter();
constructor(private eventManager: EventManager) {
this.eventManager.addGlobalEventListener(
"window",
"storage",
({ key, oldValue, newValue }) => {
if (key) { // this mean new item has been set
this.change.emit({
type: localStorageAction.set,
key,
oldValue,
newValue
});
} else { // if key is null this mean the localstorage is cleared 
this.change.emit({
type: localStorageAction.clear
});
}
}
);
}
subscribe(handler) {
return this.change.subscribe(handler);
}
clear() {
localStorage.clear();
this.change.emit({
type: localStorageAction.clear
});
}
getItem(key: string) {
return localStorage.getItem(key);
}
key(index: number) {
return localStorage.key(index);
}
get length() {
return localStorage.length;
}
removeItem(key: string) {
localStorage.removeItem(key);
this.change.emit({
type: localStorageAction.remove,
key
});
}
setItem(key: string, value) {
const oldValue = localStorage.getItem("key");
localStorage.setItem(key, value);
this.change.emit({
type: localStorageAction.set,
key,
oldValue,
newValue: value
});
}
}

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

演示

• 在演示堆栈中保持更改localStorage，这就是您收到更改通知的原因
• 您需要使用此服务而不是localStorage对象，这样您就可以在同一窗口中获得更改通知
• subscribe方法返回一个订阅对象