62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Custom hook untuk mengelola state dengan localStorage
|
|
* @param key - Key untuk localStorage
|
|
* @param initialValue - Nilai awal jika tidak ada data di localStorage
|
|
* @returns [value, setValue] - Tuple berisi nilai dan fungsi setter
|
|
*/
|
|
export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
|
|
// Fungsi untuk mendapatkan nilai dari localStorage
|
|
const getStoredValue = (): T => {
|
|
if (typeof window === 'undefined') {
|
|
return initialValue;
|
|
}
|
|
|
|
try {
|
|
const item = window.localStorage.getItem(key);
|
|
return item ? JSON.parse(item) : initialValue;
|
|
} catch (error) {
|
|
console.warn(`Error reading localStorage key "${key}":`, error);
|
|
return initialValue;
|
|
}
|
|
};
|
|
|
|
// State dengan lazy initialization
|
|
const [storedValue, setStoredValue] = useState<T>(getStoredValue);
|
|
|
|
// Fungsi setter yang juga menyimpan ke localStorage
|
|
const setValue = (value: T) => {
|
|
try {
|
|
setStoredValue(value);
|
|
if (typeof window !== 'undefined') {
|
|
window.localStorage.setItem(key, JSON.stringify(value));
|
|
}
|
|
} catch (error) {
|
|
console.warn(`Error setting localStorage key "${key}":`, error);
|
|
}
|
|
};
|
|
|
|
// Update state jika localStorage berubah dari tab lain
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const handleStorageChange = (e: StorageEvent) => {
|
|
if (e.key === key && e.newValue !== null) {
|
|
try {
|
|
setStoredValue(JSON.parse(e.newValue));
|
|
} catch (error) {
|
|
console.warn(`Error parsing localStorage value for key "${key}":`, error);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('storage', handleStorageChange);
|
|
return () => window.removeEventListener('storage', handleStorageChange);
|
|
}, [key]);
|
|
|
|
return [storedValue, setValue];
|
|
}
|