65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
|
import { useState, useEffect } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hook pour gérer le stockage local
|
||
|
|
* @param key Clé de stockage
|
||
|
|
* @param initialValue Valeur initiale
|
||
|
|
* @returns [storedValue, setValue, removeValue]
|
||
|
|
*/
|
||
|
|
export function useLocalStorage<T>(
|
||
|
|
key: string,
|
||
|
|
initialValue: T,
|
||
|
|
): [T, (value: T | ((val: T) => T)) => void, () => void] {
|
||
|
|
// Obtenir la valeur depuis le stockage local ou utiliser la valeur initiale
|
||
|
|
const readValue = (): T => {
|
||
|
|
if (typeof window === 'undefined') {
|
||
|
|
return initialValue;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const item = window.localStorage.getItem(key);
|
||
|
|
return item ? (JSON.parse(item) as T) : initialValue;
|
||
|
|
} catch (error) {
|
||
|
|
console.warn(`Error reading localStorage key "${key}":`, error);
|
||
|
|
return initialValue;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const [storedValue, setStoredValue] = useState<T>(readValue);
|
||
|
|
|
||
|
|
// Retourner une version enveloppée de la fonction setter de useState qui persiste la nouvelle valeur
|
||
|
|
const setValue = (value: T | ((val: T) => T)) => {
|
||
|
|
try {
|
||
|
|
// Autoriser value à être une fonction pour avoir la même API que useState
|
||
|
|
const valueToStore =
|
||
|
|
value instanceof Function ? value(storedValue) : value;
|
||
|
|
|
||
|
|
setStoredValue(valueToStore);
|
||
|
|
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.warn(`Error setting localStorage key "${key}":`, error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const removeValue = () => {
|
||
|
|
try {
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
window.localStorage.removeItem(key);
|
||
|
|
setStoredValue(initialValue);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.warn(`Error removing localStorage key "${key}":`, error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setStoredValue(readValue());
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return [storedValue, setValue, removeValue];
|
||
|
|
}
|