symref
Version:
Static code checker for AI code agents (Windsurf, Cline, etc.)
75 lines • 2.84 kB
JavaScript
import { useState, useEffect } from 'react';
/**
* ローカルストレージと同期するカスタムフック
* @param key ストレージキー
* @param initialValue 初期値
* @returns [保存された値, 値を更新する関数, 値を削除する関数]
*/
export function useLocalStorage(key, initialValue) {
// ローカルストレージから初期状態を取得
const readValue = () => {
if (typeof window === 'undefined') {
return initialValue;
}
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
}
catch (error) {
console.warn(`localStorage の値の読み取りに失敗しました: ${key}`, error);
return initialValue;
}
};
// 状態を保持
const [storedValue, setStoredValue] = useState(readValue);
// 値を更新する関数
const setValue = (value) => {
try {
// 関数の場合は実行結果を使用
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(`localStorage の値の設定に失敗しました: ${key}`, error);
}
};
// 値を削除する関数
const removeValue = () => {
try {
// ローカルストレージから削除
if (typeof window !== 'undefined') {
window.localStorage.removeItem(key);
}
// 状態をリセット
setStoredValue(initialValue);
}
catch (error) {
console.warn(`localStorage の値の削除に失敗しました: ${key}`, error);
}
};
// ストレージイベントを監視（別タブでの変更を検知）
useEffect(() => {
const handleStorageChange = (event) => {
if (event.key === key && event.newValue !== null) {
setStoredValue(JSON.parse(event.newValue));
}
else if (event.key === key && event.newValue === null) {
setStoredValue(initialValue);
}
};
if (typeof window !== 'undefined') {
window.addEventListener('storage', handleStorageChange);
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}
return undefined;
}, [key, initialValue]);
return [storedValue, setValue, removeValue];
}
//# sourceMappingURL=useLocalStorage.js.map