原文: How to Use localStorage with React Hooks to Set and Get Items

localStorage は、JavaScript を用いて作られたサイトやアプリが、有効期限なしでウェブブラウザにキー・バリュー形式のデータを保存するためのウェブストレージオブジェクトです。

つまり、保存されたデータはページを更新したり、ブラウザを再起動しても残ったままです。これは、ブラウザに保存されたデータは、ブラウザウィンドウが閉じられても残ることを意味します。

要するに、localStorage を使うことで、開発者はブラウザ内にデータを保存したり取得したりできるようになります。

しかし、localStorage をプロジェクトのデータベースとして使用するのは良い方法ではありません。

localStorage は、アプリケーションにダークモード機能を追加したり、ToDo のデータを保存したり、ユーザーのフォーム入力値を永続化したり、その他多くの場面で頻繁に使用されます。

今回は、React Hooks で localStorage を使用し、データを簡単に保存・取得する方法を見ていきましょう。

React Hooks を使って localStorage へデータを保存・取得する方法についてのインタラクティブな Scrim:

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

React Hooks とは

React Hooks は、コンポーネントに機能を追加するために React から import する JavaScript の関数です。

Reat Hooks を使うことで、関数コンポーネント内で state やライフサイクルメソッドを使うことができます。また、既存のコードでも動作するため、導入も簡単です。

React Hooks を用いて localStorage を使用するには、2 つの React Hooks を使います:

  • useState() – アプリケーションの state は、いつか必ず変化します。useState() は、初期 state (変数やオブジェクト、あるいはその他のデータ型) を 1 つの引数として受け取り、現在の state とその state の更新関数を返します。
  • useEffect() – この React Hooks は、デフォルトでは最初のレンダリングの後、state が変更されるたびに実行されます。名前が示すように、state が変更されるたびに副作用 (effect) を実行するために使用されます。この React Hooks は、イベントリスナーを設定したり、API からデータを取得したり、コンポーネントが DOM から削除される前にイベントリスナーを削除したりするのに最適です。

React で localStorage を操作する方法

ブラウザの localStorage にアクセスするためのメソッドは 5 つあります:

  • setItem() : キー・バリュー形式のデータを localStorage に保存します。
  • getItem() : データを保存した時のキーを指定して localStorage から値を取得します。
  • removeItem() : データを保存した時のキーを指定して localStorage から値を削除します。
  • clear() : localStorage に保存されている全てのデータを削除します。
  • key(index): localStorage に保存されている、指定された index 番号のキー名を返します。

今回は、最も使用頻度の高い setItem() と getItem() に絞って解説していきます。

setItem() の使い方

localStorage にキーを設定すると、データを格納できます。このデータの値は、テキスト、整数、オブジェクト、配列など、どのようなデータ型でも構いません。

localStorage にデータを格納する際、そのデータを JSON.stringify() を使って文字列へ変換する必要があることを忘れないでください。

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

上記のコードでは、まず空配列の state を作成 (配列以外のデータ型でも良い) しています。次に、useEffect() を使うことによって state が更新されたときに localStorage へデータを追加しています。これは useEffect() の第二引数に state を渡すことで実現しています。

基本的には、以下のように指定することで localStorage にキー・バリュー形式のデータを追加できます:

localStorage.setItem('items', JSON.stringify(items));

つまり、先ほどのコードではキーに 'items' という名前を付け、それに値を代入しています。ただし、まず追加するデータが JSON 文字列であることを確認する必要がありましたね。

JSON.stringify() を使用して、JSON オブジェクトを文字列である JSON テキストに変換し、ウェブサーバーに送信できるようにします。

s_EAEEAE9063B0CA7CBC6574F36123E82B36B6C1EC3724A86DA7C0B4C67C2DD652_1645380076460_explaining-useeffect-local-storage
hooks が localStorage と連携してデータを格納する仕組み

getItem() の使い方

このメソッドは localStorage からオブジェクトを取得します。React では他の方法もありますが、ここでは useEffect() を使用します。

useEffect() は、最初のレンダリング時にすべてのアイテムを取得してくれます。つまり、コンポーネントがマウントまたは再レンダリングするたびに、localStorage からすべてのデータを取得します。

useEffect() の第二引数を空にしているのはこのためです。

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

先ほどデータを localStorage に保存した時、データを JSON 文字列に変換したことを思い出してください。つまり、このデータを利用するためには、JSON 文字列を JSON オブジェクトに変換する必要があります。これは、JSON.parse() メソッドで行います。

s_EAEEAE9063B0CA7CBC6574F36123E82B36B6C1EC3724A86DA7C0B4C67C2DD652_1645369611908_explaining-useeffect-local-storage2
hooks が localstorage と連携してアイテムを取得する仕組み

まとめ

この記事では、React hooks を使って localStorage を使う方法、使うタイミングやどの hooks を使うかについて学びました。

実際にこれがどのように機能するか知りたい方は、localStorage とこれらの Hooks を使用したシンプルな ToDo リストアプリのソースコードを参照してください。

state と props の詳細については、私が書いたこちらの記事で学ぶことができます。また、こちらの content repository から、私が書いた記事の全てを閲覧できます。