ReactHooksでlocalStorageを使用する #React

localStorageとは

Webブラウザにデータを保存するためのAPIの一つです。cookieのようにWebサーバーにデータを保存するのではなくブラウザに保存するので、ブラウザを閉じてもユーザーの入力情報などを保持し続けることができます。主要なブラウザなら5MBまでデータを保存できます。テキストだと、大まかに250万文字保存可能です。

注意点

データは永続的に保存される

localStorageのデータを削除する処理を書かないと、データは永続的に残り続けるので削除する処理を書く必要があります。

Javascriptから自由にアクセスできる

セキュリティ上、ユーザーの個人情報など、機密性の高い情報には使わないよう注意です。

基本的な記述

// ローカルストレージに値を保存する
localStorage.setItem("key", "value");

// ローカルストレージから値を取得する
const value = localStorage.getItem("key");

// ローカルストレージから値を削除する
localStorage.removeItem("key");

// ローカルストレージをすべてクリアする
localStorage.clear();

１つのキーに対して１つのスカラー値を読み書きします。
※スカラー値とは、単一の値で表される量です。1つの値もしくはデータ型（整数、論理値、文字列など）

ReactHooksを使用した例

ReactHooksを使用するとコンポーネント内で状態を管理でき、また、状態が変化したときに、自動的に再レンダリングを行い、最新の状態を表示することができます。カスタムフックを使用することで、localStorageにアクセスするための共通のロジックを切り出し、再利用できます。

import React, { useState, useEffect } from 'react';

// useStateとuseEffectを使用し、localStorageを扱うためのフックを定義
export const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // localStorageから値を取得。値が存在しない場合はinitialValueを返す
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  // useEffectを使用し、stateの値が変更された時にlocalStorageに値を保存
  useEffect(() => {
    try {
      const serializedValue = JSON.stringify(storedValue);
      localStorage.setItem(key, serializedValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
};

useLocalStorageフックは、渡されたkeyに対応するlocalStorageの値を取得し、useStateで管理します。initialValue(初期値)が渡された場合 (localStorageに対応する値が無い場合は初期値を使用) useStateの初期値に関数を渡すことで、初期値の計算を遅延させています。

useEffectは、stateの値が変更された時にlocalStorageに値を保存する処理を実装しています。第2引数に[key, storedValue]を指定しているため、keyかstoredValueが変更された時に処理が実行されます。

なお、JSON.parse(item)は、JSON形式の文字列をパースしてJavaScriptのオブジェクトに変換できるメソッドです。JSON.stringify()は、JavaScriptオブジェクトをJSON文字列に変換するメソッドです。