Feat: Add setItemIfNotExists option to set storage value if not exists

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.test.ts

@@ -235,4 +235,34 @@ describe('useLocalStorage()', () => {
 
  expect(localStorage.getItem('key')).toBe('42')
  })
+
+ it('should set local storage value to initial if not exists and `setItemIfNotExists` is true', () => {
+ const LOCAL_STORAGE_KEY = 'key'
+ const INITIAL_VALUE = 'initial_value'
+ expect(localStorage.getItem(LOCAL_STORAGE_KEY)).toBeNull()
+
+ renderHook(() =>
+ useLocalStorage(LOCAL_STORAGE_KEY, INITIAL_VALUE, {
+ setItemIfNotExists: true,
+ }),
+ )
+
+ expect(localStorage.getItem(LOCAL_STORAGE_KEY)).toBe(
+ JSON.stringify(INITIAL_VALUE),
+ )
+ })
+
+ it('should not set local storage value to initial if not exists and `setItemIfNotExists` is false', () => {
+ const LOCAL_STORAGE_KEY = 'key'
+ const INITIAL_VALUE = 'initial_value'
+ expect(localStorage.getItem(LOCAL_STORAGE_KEY)).toBeNull()
+
+ renderHook(() =>
+ useLocalStorage(LOCAL_STORAGE_KEY, INITIAL_VALUE, {
+ setItemIfNotExists: false,
+ }),
+ )
+
+ expect(localStorage.getItem(LOCAL_STORAGE_KEY)).toBeNull()
+ })
 })

packages/usehooks-ts/src/useLocalStorage/useLocalStorage.ts

@@ -26,6 +26,10 @@ type UseLocalStorageOptions<T> = {
  * @default true
  */
  initializeWithValue?: boolean
+ /**
+ * If `true`, the hook will initialize local storage value if it not exists.
+ */
+ setItemIfNotExists?: boolean
 }
 
 const IS_SERVER = typeof window === 'undefined'
@@ -145,6 +149,19 @@ export function useLocalStorage<T>(
  })
 
  useEffect(() => {
+ if (options.setItemIfNotExists) {
+ try {
+ const localStorageValue = window.localStorage.getItem(key)
+ if (localStorageValue === null) {
+ const initialValueToUse =
+ initialValue instanceof Function ? initialValue() : initialValue
+ window.localStorage.setItem(key, serializer(initialValueToUse))
+ }
+ } catch (error) {
+ console.warn(`Error initializing localStorage key “${key}”:`, error)
+ }
+ }
+
  setStoredValue(readValue())
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key])

packages/usehooks-ts/src/useSessionStorage/useSessionStorage.test.ts

@@ -226,4 +226,34 @@ describe('useSessionStorage()', () => {
 
  expect(sessionStorage.getItem('key')).toBe('42')
  })
+
+ it('should set session storage value to initial if not exists and `setItemIfNotExists` is true', () => {
+ const SESSION_STORAGE_KEY = 'key'
+ const INITIAL_VALUE = 'initial_value'
+ expect(sessionStorage.getItem(SESSION_STORAGE_KEY)).toBeNull()
+
+ renderHook(() =>
+ useSessionStorage(SESSION_STORAGE_KEY, INITIAL_VALUE, {
+ setItemIfNotExists: true,
+ }),
+ )
+
+ expect(sessionStorage.getItem(SESSION_STORAGE_KEY)).toBe(
+ JSON.stringify(INITIAL_VALUE),
+ )
+ })
+
+ it('should not set session storage value to initial if not exists and `setItemIfNotExists` is false', () => {
+ const SESSION_STORAGE_KEY = 'key'
+ const INITIAL_VALUE = 'initial_value'
+ expect(sessionStorage.getItem(SESSION_STORAGE_KEY)).toBeNull()
+
+ renderHook(() =>
+ useSessionStorage(SESSION_STORAGE_KEY, INITIAL_VALUE, {
+ setItemIfNotExists: false,
+ }),
+ )
+
+ expect(sessionStorage.getItem(SESSION_STORAGE_KEY)).toBeNull()
+ })
 })

packages/usehooks-ts/src/useSessionStorage/useSessionStorage.ts

@@ -26,6 +26,10 @@ type UseSessionStorageOptions<T> = {
  * @default true
  */
  initializeWithValue?: boolean
+ /**
+ * If `true`, the hook will initialize session storage value if it not exists.
+ */
+ setItemIfNotExists?: boolean
 }
 
 const IS_SERVER = typeof window === 'undefined'
@@ -146,6 +150,19 @@ export function useSessionStorage<T>(
  })
 
  useEffect(() => {
+ if (options.setItemIfNotExists) {
+ try {
+ const sessionStorageValue = window.sessionStorage.getItem(key)
+ if (sessionStorageValue === null) {
+ const initialValueToUse =
+ initialValue instanceof Function ? initialValue() : initialValue
+ window.sessionStorage.setItem(key, serializer(initialValueToUse))
+ }
+ } catch (error) {
+ console.warn(`Error initializing sessionStorage key “${key}”:`, error)
+ }
+ }
+
  setStoredValue(readValue())
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [key])