useLocalStorage フックを使用した React でのローカル ストレージの管理

この記事では、効率的なローカル ストレージ管理のための再利用可能な useLocalStorage React フックの構築について説明します。 これにより、React アプリケーションでの永続データの処理が簡素化され、クリーンでタイプセーフなアプローチが提供されます。

1.ローカル ストレージ ユーティリティの機能

フックを作成する前に、localStorage と対話するためのヘルパー関数を構築します。

• setItem(key: string, value: unknown): データを localStorage に安全に保存します。 JSON.stringify を使用して値をシリアル化し、コンソールにログを記録することで潜在的なエラー (ストレージ制限の超過など) を処理します。

• getItem<T>(key: string): T | undefined: localStorage からデータを取得して解析します。 タイプセーフのために TypeScript ジェネリックス (<T>) を使用し、キーが存在しない場合は undefined を返します。 エラー処理が含まれています。

• removeItem(key: string): localStorage からキーと値のペアを削除します。これにはエラー処理も含まれます。

2. useLocalStorage フック

このソリューションの核心は useLocalStorage フックです:

• 初期化: フックは、パラメータとして key (localStorage の場合) と initialValue を受け取ります。 useState を使用して状態を初期化し、localStorage で既存のデータをチェックします。見つからない場合は、initialValue が使用されます。

• 状態更新 (handleDispatch): この関数は、コンポーネントの状態と localStorage の両方を更新します。新しい値または関数 (以前の状態に基づいて更新するため) を受け入れ、同期を確保します。

• 状態クリアリング (clearState): この関数は状態を undefined にリセットし、localStorage から項目を削除します。

• 戻り値: フックは配列 [value, handleDispatch, clearState] を返し、現在の値、更新関数、およびクリア関数へのアクセスを提供します。

3.フックの使用

React コンポーネントで useLocalStorage を使用する方法は次のとおりです:

<code class="language-javascript">import useLocalStorage from "./useLocalStorage"; // Path to your hook file

function Counter() {
  const [count, setCount, clearCount] = useLocalStorage<number>("counter", 0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
      <button onClick={clearCount}>Reset</button>
    </div>
  );
}</code>

この例は、永続的なカウンター機能を示しています。 count 値は localStorage に保存され、ページがリロードされても存続します。

完全なコード (localStorage.ts および useLocalStorage.ts)

localStorage.ts と useLocalStorage.ts の完全なコードは元の入力で提供され、変更されません。

結論

このカスタム フックは、localStorage を使用して React アプリケーションの永続データを管理するための、堅牢でタイプセーフで再利用可能なソリューションを提供します。 そのクリーンな API により、開発が簡素化され、コードの保守性が向上します。

以上がuseLocalStorage フックを使用した React でのローカル ストレージの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。