原文: https://www.freecodecamp.org/news/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 テキストに変換し、ウェブサーバーに送信できるようにします。
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()
メソッドで行います。
まとめ
この記事では、React hooks を使って localStorage を使う方法、使うタイミングやどの hooks を使うかについて学びました。
実際にこれがどのように機能するか知りたい方は、localStorage とこれらの Hooks を使用したシンプルな ToDo リストアプリのソースコードを参照してください。
state と props の詳細については、私が書いたこちらの記事で学ぶことができます。また、こちらの content repository から、私が書いた記事の全てを閲覧できます。