add storage class to handle gracefull degration

src/local-storage-events.ts

@@ -1,3 +1,4 @@
+import { storage  } from './storage'
 interface KVP<K, V> {
     key: K,
     value: V
@@ -49,7 +50,7 @@ export function isTypeOfLocalStorageChanged<TValue>(evt: any): evt is LocalStora
  */
 export function writeStorage<TValue>(key: string, value: TValue) {
     try {
-        localStorage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : `${value}`);
+        storage.setItem(key, typeof value === 'object' ? JSON.stringify(value) : `${value}`);
         window.dispatchEvent(new LocalStorageChanged({ key, value }));
     } catch (err) {
         if (err instanceof TypeError && err.message.includes('circular structure')) {
@@ -86,6 +87,6 @@ export function writeStorage<TValue>(key: string, value: TValue) {
  * @param {string} key The key of the item you wish to delete from localStorage.
  */
 export function deleteFromStorage(key: string) {
-    localStorage.removeItem(key);
+    storage.removeItem(key);
     window.dispatchEvent(new LocalStorageChanged({ key, value: null }))
 }

src/storage.ts

@@ -0,0 +1,64 @@
+/**
+ * Test if localStorage API is available
+ * From https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#Feature-detecting_localStorage
+ * @returns {boolean}
+ */
+export function localStorageAvailable(): boolean {
+  try {
+    var x = '@rehooks/local-storage:' + new Date().toISOString();
+    localStorage.setItem(x, x);
+    localStorage.removeItem(x);
+    return true;
+  }
+  catch(e) {
+    return e instanceof DOMException && (
+      // everything except Firefox
+      e.code === 22 ||
+      // Firefox
+      e.code === 1014 ||
+      // test name field too, because code might not be present
+      // everything except Firefox
+      e.name === 'QuotaExceededError' ||
+      // Firefox
+      e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+      // acknowledge QuotaExceededError only if there's something already stored
+      (localStorage && localStorage.length !== 0);
+  }
+}
+
+
+/**
+ * Provides a proxy to localStorage, returning default return values
+ * if `localStorage` is not available
+ */
+export class ProxyStorage {
+  available: boolean
+
+  constructor() {
+    this.available = localStorageAvailable()
+  }
+
+  getItem(key: string): string | null {
+    if (this.available === true) {
+      return localStorage.getItem(key)
+    }
+    return null
+  }
+
+  setItem(key: string, value: string): void {
+    if (this.available === true) {
+      return localStorage.setItem(key, value)
+    }
+    return undefined
+  }
+
+  removeItem(key: string): void {
+    if (this.available === true) {
+      return localStorage.removeItem(key)
+    }
+    return undefined
+  }
+}
+
+
+export const storage = new ProxyStorage()

src/use-localstorage.ts

@@ -4,7 +4,8 @@ import {
   LocalStorageChanged,
   isTypeOfLocalStorageChanged,
 } from './local-storage-events';
-import { useEffect, useState, useCallback } from 'react';
+import { storage  } from './storage'
+import { useEffect, useState, useCallback, useRef } from 'react';
 
 /**
  * This exists for trying to serialize the value back to JSON.
@@ -53,9 +54,9 @@ export function useLocalStorage<TValue = string>(
   defaultValue: TValue | null = null,
 ) {
   const [localState, updateLocalState] = useState<TValue | null>(
-    localStorage.getItem(key) === null
+    storage.getItem(key) === null
       ? defaultValue
-      : tryParse(localStorage.getItem(key)!)
+      : tryParse(storage.getItem(key)!)
   );
 
   const onLocalStorageChange = (event: LocalStorageChanged<TValue> | StorageEvent) => {
@@ -83,7 +84,7 @@ export function useLocalStorage<TValue = string>(
 
     // Write default value to the local storage if there currently isn't any value there.
     // Don't however write a defaultValue that is null otherwise it'll trigger infinite updates.
-    if (localStorage.getItem(key) === null && defaultValue !== null) {
+    if (storage.getItem(key) === null && defaultValue !== null) {
       writeStorage(key, defaultValue);
     }
 

test/index.test.tsx

@@ -3,6 +3,8 @@ import { useLocalStorage, writeStorage, deleteFromStorage } from '../src';
 import { renderHook } from '@testing-library/react-hooks';
 import { render, fireEvent, act, cleanup } from '@testing-library/react';
 
+import { storage } from '../src/storage'
+
 
 afterEach(() => {
   cleanup();

test/storage.test.ts

@@ -0,0 +1,56 @@
+import { ProxyStorage } from '../src/storage'
+
+describe('ProxyStorage', () => {
+    describe('when localStorage is available', () => {
+        // check assumption localStorage is available in tests
+        window.localStorage.setItem('hi', 'hi')
+        expect(window.localStorage.getItem('hi')).toEqual('hi')
+
+        const storage = new ProxyStorage()
+
+        it('initiates ProxyStorage as available', () => {
+            expect(storage.available).toEqual(true)
+        })
+
+        it('calls localStorage.setItem', () => {
+            storage.setItem('key1', 'value2')
+            expect(localStorage.getItem('key1')).toEqual('value2')
+        })
+
+        it('calls localStorage.getItem', () => {
+            localStorage.setItem('key2', 'value1')
+            expect(storage.getItem('key2')).toEqual('value1')
+        })
+
+        it('calls localStorage.removeItem', () => {
+            localStorage.setItem('key3', 'value1')
+            expect(storage.removeItem('key3')).toEqual(undefined)
+            expect(localStorage.getItem('key3')).toEqual(null)
+        })
+    })
+
+    describe('when localStorage is not available', () => {
+        // check assumption localStorage is available in tests
+        window.localStorage.setItem('hi', 'hi')
+        expect(window.localStorage.getItem('hi')).toEqual('hi')
+
+        const storage = new ProxyStorage()
+        storage.available = false
+
+        it('returns default instead of calling localStorage.setItem', () => {
+            expect(storage.setItem('key4', 'value2')).toEqual(undefined)
+            expect(localStorage.getItem('key4')).toEqual(null)
+        })
+
+        it('returns default instead of calling localStorage.getItem', () => {
+            localStorage.setItem('key5', 'value1')
+            expect(storage.getItem('key5')).toEqual(null)
+        })
+
+        it('returns default instead of calling localStorage.getItem', () => {
+            localStorage.setItem('key6', 'value1')
+            expect(storage.removeItem('key6')).toEqual(undefined)
+            expect(localStorage.getItem('key6')).toEqual('value1')
+        })
+    })
+})

test/use-localstorage.test.ts

@@ -1,6 +1,8 @@
 import { useLocalStorage, deleteFromStorage } from '../src';
 import { renderHook, act } from '@testing-library/react-hooks';
 
+import { storage } from '../src/storage'
+
 describe('Module: use-localstorage', () => {
     describe('useLocalStorage', () => {
         it('is callable', () => {
@@ -130,5 +132,48 @@ describe('Module: use-localstorage', () => {
                 });
             });
         });
+
+        describe("when localStorage api is disabled", () => {
+            beforeAll(() => storage.available = false)
+
+            afterAll(() => storage.available = true)
+
+            it('should return default value', () => {
+
+                const key = 'car';
+                const defaultValue = 'beamer'
+
+                const { result } = renderHook(() => useLocalStorage(key, defaultValue))
+
+                expect(result.current[0]).toBe(defaultValue)
+            })
+
+            it('still tracks state in localStorage', () => {
+                const key = 'car';
+                const defaultValue = 'beamer'
+
+                const { result } = renderHook(() => useLocalStorage(key, defaultValue))
+
+                expect(result.current[0]).toBe(defaultValue)
+
+                act(() => result.current[1]('merc'))
+                expect(result.current[0]).toEqual('merc')
+                expect(localStorage.getItem('car')).toEqual(null)
+            })
+
+            it('defaults back to defaultValue in localState when deleted', () => {
+                const key = 'unavailableAPI';
+                const defaultValue = 'localStorage'
+
+                const { result } = renderHook(() => useLocalStorage(key, defaultValue))
+
+                expect(result.current[0]).toBe(defaultValue)
+
+                act(() => result.current[1]('webrtc'))
+                expect(result.current[0]).toEqual('webrtc')
+                act(() => deleteFromStorage('unavailableAPI'))
+                expect(result.current[0]).toEqual(defaultValue)
+            })
+        })
     });
 });