37 lines
905 B
TypeScript
37 lines
905 B
TypeScript
import { useState, useEffect } from 'react'
|
|
|
|
export function useLocalStorageState<T>(
|
|
key: string,
|
|
defaultValue: T,
|
|
options?: {
|
|
serialize?: (value: T) => string
|
|
deserialize?: (value: string) => T
|
|
validate?: (value: unknown) => value is T
|
|
}
|
|
): [T, (value: T | ((prev: T) => T)) => void] {
|
|
const { serialize = String, deserialize, validate } = options ?? {}
|
|
|
|
const [state, setState] = useState<T>(() => {
|
|
try {
|
|
const saved = localStorage.getItem(key)
|
|
if (saved !== null) {
|
|
const parsed = deserialize ? deserialize(saved) : (saved as unknown as T)
|
|
if (validate ? validate(parsed) : true) return parsed
|
|
}
|
|
} catch {
|
|
// 忽略
|
|
}
|
|
return defaultValue
|
|
})
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem(key, serialize(state))
|
|
} catch {
|
|
// 忽略
|
|
}
|
|
}, [key, state, serialize])
|
|
|
|
return [state, setState]
|
|
}
|