useSessionStorage

1'use client'
2 
3import * as React from 'react'
4 
5export function sessionStorageValue<T>(key: string, defaultValue: T) {
6  return {
7    get(): T {
8      if (typeof window === 'undefined') {
9        return defaultValue
10      }
11 
12      const item = window.sessionStorage.getItem(key)
13 
14      if (item === null) {
15        return defaultValue
16      }
17 
18      try {
19        return JSON.parse(item)
20      }
21      catch {
22        return typeof defaultValue === 'string' ? item as T : defaultValue
23      }
24    },
25    set(value: T): void {
26      if (typeof window !== 'undefined') {
27        window.sessionStorage.setItem(key, JSON.stringify(value))
28        window.dispatchEvent(new Event('storage'))
29      }
30    },
31    remove(): void {
32      if (typeof window !== 'undefined') {
33        window.sessionStorage.removeItem(key)
34        window.dispatchEvent(new Event('storage'))
35      }
36    },
37  }
38}
39 
40export function useSessionStorage<T>(key: string, defaultValue: T | (() => T)) {
41  const value = React.useMemo(() => {
42    const defaultVal = typeof defaultValue === 'function' ? (defaultValue as () => T)() : defaultValue
43    return sessionStorageValue(key, defaultVal)
44  }, [key, defaultValue])
45  const [storedValue, setStoredValue] = React.useState(value.get)
46  const setValue = React.useCallback((newValue: T | ((val: T) => T)) => {
47    value.set(typeof newValue === 'function' ? (newValue as (val: T) => T)(storedValue) : newValue)
48  }, [value, storedValue])
49 
50  React.useEffect(() => {
51    const abortController = new AbortController()
52 
53    window.addEventListener('storage', () => {
54      setStoredValue(value.get)
55    }, { signal: abortController.signal })
56 
57    return () => {
58      abortController.abort()
59    }
60  }, [value, setStoredValue])
61 
62  return [storedValue, setValue] as const
63}