如何解决存储事件侦听器不在当前窗口上执行
我有一个超过8个角度的应用程序,并且我正在尝试与本地存储和会话存储一起使用。收听会话存储或本地存储更改。由于角度,我正在使用事件管理器类:
constructor( private elementRef: ElementRef,private eventManager: EventManager) {
this.eventManager.addGlobalEventListener('window','storage',() => {
console.log('Event listener.....');
});
}
当我会话存储设置项目时,上述功能不执行。它仅在我转到DevTools -> Application -> Storage
然后删除该项目时执行。我在某处读到它未执行的原因是因为它无法在当前浏览器选项卡/当前窗口上执行。单击该按钮时,是否可以使事件侦听器在当前窗口或浏览器选项卡上执行?我正在使用Chrome浏览器。
解决方法
我可以想到解决方案,例如在localStorage
对象上创建服务包装并使用EventManager
来跟踪其他选项卡上的localStorage更改
local-storage.service
@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,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,newValue: value
});
}
}
现在通过此服务,您可以跟踪设置,删除项,清除等更改
- 在演示堆栈闪电击中不断更改localStorage以及为什么您会收到有关该更改的通知。
- 您需要使用此服务而不是
localStorage
对象,以便可以在同一窗口中收到有关更改的通知。- subscribe方法返回一个订阅对象。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。