Remove side-effect in StorageAPI that overrides localStorage.clear (#…

…2923)

.changeset/gold-cups-scream.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': patch
+---
+
+Remove side-effect in StorageAPI that overrides localStorage.clear

packages/graphiql-toolkit/src/storage/__tests__/base.spec.ts

@@ -1,7 +1,11 @@
 import { StorageAPI } from '../base';
 
 describe('StorageAPI', () => {
-  const storage = new StorageAPI();
+  let storage = new StorageAPI();
+
+  beforeEach(() => {
+    storage = new StorageAPI();
+  });
 
   it('returns nothing if no value set', () => {
     const result = storage.get('key1');

packages/graphiql-toolkit/src/storage/base.ts

@@ -61,14 +61,29 @@ export class StorageAPI {
       // Passing `null` creates a noop storage
       this.storage = null;
     } else if (typeof window !== 'undefined') {
-      this.storage = window.localStorage;
-      // We only want to clear the namespaced items
-      this.storage.clear = () => {
-        for (const key in window.localStorage) {
-          if (key.indexOf(`${STORAGE_NAMESPACE}:`) === 0) {
-            window.localStorage.removeItem(key);
+      this.storage = {
+        getItem: window.localStorage.getItem.bind(window.localStorage),
+        setItem: window.localStorage.setItem.bind(window.localStorage),
+        removeItem: window.localStorage.removeItem.bind(window.localStorage),
+
+        get length() {
+          let keys = 0;
+          for (const key in window.localStorage) {
+            if (key.indexOf(`${STORAGE_NAMESPACE}:`) === 0) {
+              keys += 1;
+            }
           }
-        }
+          return keys;
+        },
+
+        clear: () => {
+          // We only want to clear the namespaced items
+          for (const key in window.localStorage) {
+            if (key.indexOf(`${STORAGE_NAMESPACE}:`) === 0) {
+              window.localStorage.removeItem(key);
+            }
+          }
+        },
       };
     } else {
       this.storage = null;