diff --git a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts
index 6509ba6edb..85343d58ff 100644
--- a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts
+++ b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts
@@ -27,7 +27,6 @@ describe('WebStorage Storage API', () => {
     await storage.set('myfakekey', 'helloimastring');
     await storage.set('mysecondfakekey', 1234);
     await storage.set('mythirdfakekey', true);
-
     expect(storage.get('myfakekey')).toBe('helloimastring');
     expect(storage.get('mysecondfakekey')).toBe(1234);
     expect(storage.get('mythirdfakekey')).toBe(true);
@@ -45,4 +44,62 @@ describe('WebStorage Storage API', () => {
 
     expect(storage.get('myfakekey')).toEqual(mockData);
   });
+
+  it('should subscribe to key changes when setting a new value', async () => {
+    const storage = new WebStorage();
+
+    const wrongKeyNextHandler = jest.fn();
+    const selectedKeyNextHandler = jest.fn();
+    const mockData = { hello: 'im a great new value' };
+
+    await new Promise(resolve => {
+      storage.observe$('correctKey').subscribe({
+        next: (...args) => {
+          selectedKeyNextHandler(...args);
+          resolve();
+        },
+      });
+
+      storage.observe$('wrongKey').subscribe({ next: wrongKeyNextHandler });
+
+      storage.set('correctKey', mockData);
+    });
+
+    expect(wrongKeyNextHandler).not.toHaveBeenCalled();
+    expect(selectedKeyNextHandler).toHaveBeenCalledTimes(1);
+    expect(selectedKeyNextHandler).toHaveBeenCalledWith({
+      key: 'correctKey',
+      newValue: mockData,
+    });
+  });
+
+  it('should subscribe to key changes when deleting a value', async () => {
+    const storage = new WebStorage();
+
+    const wrongKeyNextHandler = jest.fn();
+    const selectedKeyNextHandler = jest.fn();
+    const mockData = { hello: 'im a great new value' };
+
+    storage.set('correctKey', mockData);
+
+    await new Promise(resolve => {
+      storage.observe$('correctKey').subscribe({
+        next: (...args) => {
+          selectedKeyNextHandler(...args);
+          resolve();
+        },
+      });
+
+      storage.observe$('wrongKey').subscribe({ next: wrongKeyNextHandler });
+
+      storage.remove('correctKey');
+    });
+
+    expect(wrongKeyNextHandler).not.toHaveBeenCalled();
+    expect(selectedKeyNextHandler).toHaveBeenCalledTimes(1);
+    expect(selectedKeyNextHandler).toHaveBeenCalledWith({
+      key: 'correctKey',
+      newValue: undefined,
+    });
+  });
 });
diff --git a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts
index cbcab6349e..432c08e3d1 100644
--- a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts
+++ b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts
@@ -18,7 +18,19 @@ import { Observable } from '../../../types';
 import ObservableImpl from 'zen-observable';
 
 export class WebStorage implements StorageApi {
-  private readonly observable = new ObservableImpl<ObservableMessage>(() => {});
+  subscribers: Set<
+    ZenObservable.SubscriptionObserver<ObservableMessage>
+  > = new Set();
+
+  private readonly observable = new ObservableImpl<ObservableMessage>(
+    subscriber => {
+      this.subscribers.add(subscriber);
+      return () => {
+        this.subscribers.delete(subscriber);
+      };
+    },
+  );
+
   get<T>(key: string): T | undefined {
     try {
       const storage = JSON.parse(localStorage.getItem(key)!);
@@ -35,10 +47,18 @@ export class WebStorage implements StorageApi {
 
   async set<T>(key: string, data: T): Promise<void> {
     localStorage.setItem(key, JSON.stringify(data, null, 2));
+    this.notifyChanges({ key, newValue: data });
   }
 
   async remove(key: string): Promise<void> {
     localStorage.removeItem(key);
+    this.notifyChanges({ key, newValue: undefined });
+  }
+
+  notifyChanges(message: ObservableMessage) {
+    for (const subscription of this.subscribers) {
+      subscription.next(message);
+    }
   }
 
   observe$<T>(key: string): Observable<T> {