feat(core-api/Storage): Encode the key names to avoid clashes

packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts

@@ -117,4 +117,17 @@ describe('WebStorage Storage API', () => {
     expect(firstStorage.get(keyName)).toBe('boop');
     expect(secondStorage.get(keyName)).toBe('deerp');
   });
+
+  it('should not clash with other namesapces when creating buckets', async () => {
+    const rootStorage = new WebStorage();
+
+    // when getting key test2 it will translate to /profile/something/deep/test2
+    const firstStorage = rootStorage.forBucket('profile/something/deep');
+    // when getting key deep/test2 it will translate to /profile/something/deep/test2
+    const secondStorage = rootStorage.forBucket('profile/something');
+
+    await firstStorage.set('test2', { error: true });
+
+    expect(secondStorage.get('deep/test2')).toBe(undefined);
+  });
 });

packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts

@@ -53,7 +53,7 @@ export class WebStorage implements StorageApi {
   }
 
   private getKeyName(key: string) {
-    return `${this.namespace}/${key}`;
+    return `${this.namespace}/${encodeURIComponent(key)}`;
   }
 
   private notifyChanges<T>(message: ObservableMessage<T>) {
@@ -62,9 +62,9 @@ export class WebStorage implements StorageApi {
     }
   }
 
-  private subscribers: Set<
+  private subscribers = new Set<
     ZenObservable.SubscriptionObserver<ObservableMessage>
-  > = new Set();
+  >();
 
   private readonly observable = new ObservableImpl<ObservableMessage>(
     subscriber => {