blob: f24c80dbd36715b4def35f89ac00cee4051f229f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
"use client"
import { useState, useEffect } from 'react'
export function useLocalStorage<T>(
key: string,
initialValue: T
): [T, (value: T) => void] {
// State to store our value
const [storedValue, setStoredValue] = useState<T>(initialValue)
// Initialize with stored value or initial value
useEffect(() => {
try {
// Get from local storage by key
if (typeof window !== 'undefined') {
const item = window.localStorage.getItem(key)
// Parse stored json or if none return initialValue
setStoredValue(item ? JSON.parse(item) : initialValue)
}
} catch (error) {
// If error also return initialValue
console.error('Error reading from localStorage:', error)
setStoredValue(initialValue)
}
}, [key, initialValue])
// Return a wrapped version of useState's setter function that
// persists the new value to localStorage.
const setValue = (value: T) => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value
// Save state
setStoredValue(valueToStore)
// Save to local storage
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, JSON.stringify(valueToStore))
}
} catch (error) {
// A more advanced implementation would handle the error case
console.error('Error writing to localStorage:', error)
}
}
return [storedValue, setValue]
}
|
