diff --git a/packages/core-api/src/apis/definitions/StorageApi.ts b/packages/core-api/src/apis/definitions/StorageApi.ts
index 7d7533f5b4..a84807d314 100644
--- a/packages/core-api/src/apis/definitions/StorageApi.ts
+++ b/packages/core-api/src/apis/definitions/StorageApi.ts
@@ -17,7 +17,7 @@
 import { createApiRef } from '../ApiRef';
 import { Observable } from '../../types';
 
-export type ObservableMessage<T = any> = {
+export type StorageValueChange<T = any> = {
   key: string;
   newValue?: T;
 };
@@ -56,7 +56,7 @@ export interface StorageApi {
    * Observe changes on a particular key in the bucket
    * @param {String} key Unique key associated with the data
    */
-  observe$<T>(key: string): Observable<ObservableMessage<T>>;
+  observe$<T>(key: string): Observable<StorageValueChange<T>>;
 }
 
 export const storageApiRef = createApiRef<StorageApi>({
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 de6d55c7a4..e68981d157 100644
--- a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts
+++ b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.test.ts
@@ -122,7 +122,10 @@ describe('WebStorage Storage API', () => {
     const rootStorage = new WebStorage();
 
     // when getting key test2 it will translate to /profile/something/deep/test2
-    const firstStorage = rootStorage.forBucket('profile/something/deep');
+    const firstStorage = rootStorage
+      .forBucket('profile')
+      .forBucket('something')
+      .forBucket('deep');
     // when getting key deep/test2 it will translate to /profile/something/deep/test2
     const secondStorage = rootStorage.forBucket('profile/something');
 
diff --git a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts
index bd7c144421..bb9eb9d7ce 100644
--- a/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts
+++ b/packages/core-api/src/apis/implementations/StorageApi/WebStorage.ts
@@ -13,12 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { StorageApi, ObservableMessage } from '../../definitions';
+import { StorageApi, StorageValueChange } from '../../definitions';
 import { Observable } from '../../../types';
 import ObservableImpl from 'zen-observable';
 
 export class WebStorage implements StorageApi {
-  constructor(private readonly namespace: string = '') {}
+  private readonly namespace: string;
+
+  constructor(namespace: string = '') {
+    this.namespace = namespace ? encodeURIComponent(namespace) : namespace;
+  }
 
   get<T>(key: string): T | undefined {
     try {
@@ -48,7 +52,7 @@ export class WebStorage implements StorageApi {
     this.notifyChanges({ key, newValue: undefined });
   }
 
-  observe$<T>(key: string): Observable<ObservableMessage<T>> {
+  observe$<T>(key: string): Observable<StorageValueChange<T>> {
     return this.observable.filter(({ key: messageKey }) => messageKey === key);
   }
 
@@ -56,17 +60,17 @@ export class WebStorage implements StorageApi {
     return `${this.namespace}/${encodeURIComponent(key)}`;
   }
 
-  private notifyChanges<T>(message: ObservableMessage<T>) {
+  private notifyChanges<T>(message: StorageValueChange<T>) {
     for (const subscription of this.subscribers) {
       subscription.next(message);
     }
   }
 
   private subscribers = new Set<
-    ZenObservable.SubscriptionObserver<ObservableMessage>
+    ZenObservable.SubscriptionObserver<StorageValueChange>
   >();
 
-  private readonly observable = new ObservableImpl<ObservableMessage>(
+  private readonly observable = new ObservableImpl<StorageValueChange>(
     subscriber => {
       this.subscribers.add(subscriber);
       return () => {