diff --git a/packages/core-app-api/src/apis/implementations/StorageApi/WebStorage.ts b/packages/core-app-api/src/apis/implementations/StorageApi/WebStorage.ts index 0f56a608c1..224327298f 100644 --- a/packages/core-app-api/src/apis/implementations/StorageApi/WebStorage.ts +++ b/packages/core-app-api/src/apis/implementations/StorageApi/WebStorage.ts @@ -24,14 +24,6 @@ import ObservableImpl from 'zen-observable'; const buckets = new Map(); -window.addEventListener('storage', event => { - for (const [bucketPath, webStorage] of buckets.entries()) { - if (event.key?.startsWith(bucketPath)) { - webStorage.handleStorageChange(event.key); - } - } -}); - /** * An implementation of the storage API, that uses the browser's local storage. * @@ -43,6 +35,8 @@ export class WebStorage implements StorageApi { private readonly errorApi: ErrorApi, ) {} + private static hasSubscribers = false; + static create(options: { errorApi: ErrorApi; namespace?: string; @@ -50,6 +44,16 @@ export class WebStorage implements StorageApi { return new WebStorage(options.namespace ?? '', options.errorApi); } + private static addStorageEventListener() { + window.addEventListener('storage', event => { + for (const [bucketPath, webStorage] of buckets.entries()) { + if (event.key?.startsWith(bucketPath)) { + webStorage.handleStorageChange(event.key); + } + } + }); + } + get(key: string): T | undefined { return this.snapshot(key).value as T | undefined; } @@ -97,6 +101,10 @@ export class WebStorage implements StorageApi { observe$( key: string, ): Observable> { + if (!WebStorage.hasSubscribers) { + WebStorage.addStorageEventListener(); + WebStorage.hasSubscribers = true; + } return this.observable.filter(({ key: messageKey }) => messageKey === key); }