Remove key from storage if default value

src/infrastructure/chrome.mock.ts

@@ -27,6 +27,7 @@ const topSites: TopSites = Object.freeze({
 const storageArea: StorageArea = Object.freeze({
   get: async () => ({}),
   set: async () => undefined,
+  remove: async () => undefined,
   onChanged: nullEvent,
 })
 

src/infrastructure/chrome.ts

@@ -20,6 +20,7 @@ export type StorageAreaName = 'sync'
 export type StorageArea = {
   get(key: string): Promise<Record<string, unknown>>
   set(items: Record<string, unknown>): Promise<void>
+  remove(keys: string | string[]): Promise<void>
   onChanged: Pick<chrome.storage.StorageArea['onChanged'], 'addListener' | 'removeListener'>
 }
 

src/infrastructure/chromeStorage.ts

@@ -51,6 +51,10 @@ const loadValue = async <T>(storageArea: StorageArea, spec: Spec<T>, setStoredVa
 }
 
 const saveValue = async <T>(storageArea: StorageArea, spec: Spec<T>, newValue: T) => {
+  if (newValue === spec.defaultValue) {
+    await storageArea.remove(spec.key)
+    return
+  }
   await storageArea.set({ [spec.key]: newValue })
 }
 

src/infrastructure/localStorage.mock.tsx

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react'
 const nullLocalStorage: LocalStorage = {
   setItem: () => {},
   getItem: () => null,
+  removeItem: () => {},
 }
 
 export const NullLocalStorageProvider = (props: PropsWithChildren) => (

src/infrastructure/localStorage.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
 
-export type LocalStorage = Pick<Storage, 'setItem' | 'getItem'>
+export type LocalStorage = Pick<Storage, 'setItem' | 'getItem' | 'removeItem'>
 
 export const LocalStorageContext = createContext<LocalStorage>(window.localStorage)

src/infrastructure/localStorageCache.ts

@@ -11,8 +11,12 @@ export const useLocalStorageCache = <T extends string>(spec: Spec<T>): [T, Dispa
   const localStorage = useContext(LocalStorageContext)
   const [value, setValue] = useState<T>(getLocalStorageCacheOrDefaultValue(localStorage, spec))
   useEffect(() => {
+    if (value === spec.defaultValue) {
+      localStorage.removeItem(spec.key)
+      return
+    }
     localStorage.setItem(spec.key, value)
-  }, [spec.key, value])
+  }, [spec.key, spec.defaultValue, value])
   return [value, setValue]
 }
 

src/setupTests.ts

@@ -32,6 +32,7 @@ const chrome: Chrome = {
     sync: {
       get: vi.fn().mockResolvedValue({}),
       set: vi.fn(),
+      remove: vi.fn(),
       onChanged: {
         addListener: vi.fn(),
         removeListener: vi.fn(),