Reactで作った割り勘アプリにLocalStorageを導入してみた

こんにちは。

最近、割り勘アプリを作っていました（まだ途中です）。

ただ作るだけだと、表示ができてもリロードしたら画面が消えてしまいます。
そこで今回使用したのが、LocalStorageです。

一旦データ共有を考えずに作った(実用的でなくすみません)ことと、DBを構築するハードルを避けたかったという理由から、今回はLocalStorageを使用しました。

LocalStorageの仕組み

LocalStorageとは、JavaScriptを利用することでブラウザにデータを保存することができる仕組みです。
画面をリロードしてもデータが消えず、 DB不要で実装に取り入れることができます。

保存できる容量はおよそ5MBまでですが、今回の私の開発のようにテキストデータを保存するだけに使うには十分です。

実装方法(文字列の場合)

まず、起動時にLocalStorageに保存されているデータを取得します。
読み込む時

const [text, setText] = useState(() => {
  const data = localStorage.getItem('saved_data');
  return data ?? '';
});

保存済みのデータがあれば復元し、なければ空文字にしています。

保存する時

useEffect(() => {
  localStorage.setItem('saved_data', text);
}, [text]);

useEffectを使用して、textが変わるたびにLocalStorageの内容も更新しています。
第2引数の [text] は依存配列といい、textが変更されたときだけlocalStorageへ保存する処理が実行されます。

注意点

1つ目

LocalStorageでは文字列として保存されます。(100が"100"になる)
配列やオブジェクトを保存したい場合、数値を数値として扱いたい場合は以下のような操作が必要です。

保存する時は
JSON.stringify()

読み込む時は
JSON.parse()

を用いることで、配列やオブジェクト、数値を元の型のまま扱うことができます。
※文字列だけの場合はこの変換は不要です。

実際に以下のようなコードで読み込み・保存しました。
（先程の説明のコードと違い、こちらでは配列を扱っています。）

// 読み込む処理
  const[payments, setPayments] = useState<Payment[]>(() => {
    const savedData = localStorage.getItem('split-bill-data');
    if (savedData){
      return JSON.parse(savedData);
    }
    return[];
  });

// 保存する処理
  useEffect(() => {
    localStorage.setItem('split-bill-data', JSON.stringify(payments));
  }, [payments]);

2つ目

LocalStorageは自分の端末・ブラウザでしか使えません。
シークレットモードで開いたり、ブラウザのキャッシュをクリアしたりするとデータは消えてしまいます。
データを共有するような実装が必要な場合には、別の方法を考える必要があります。

あとがき

最後まで読んでくださりありがとうございました！

これから、割り勘相手と中身を共有するためにLocalStorage以外の方法を模索していこうと思っています。

また次回の記事でお会いしましょう！