<aside> ✅ 【今すぐやりましょう！】 PGrit で、 #frontend目標宣言 をつけて React課題を修了する目標日を投稿しましょう！

↓ 例

Untitled

【PGritについて】 PGritに投稿することで、自分のことを知ってもらい、そしてメンバーを知り、仲良くなりましょう！仲良くなると一緒にハッカソンなどのイベントに参加できるかも…?🚀

</aside>

前回までで一通りTodoアプリとして使えるものは作れましたが、まだまだ使いづらい部分が多いです。特に、ブラウザを閉じるとせっかく登録したタスクが全て消えてしまうのは致命的でしょう。ここでは、ページから使用できるブラウザの記憶領域、Local Storageを使って、タスクの情報を保存できるようにしていきましょう。

編集するファイルは以下です。

ディレクトリ構造

src
  └ components
    └ Organisms
      └ TodoCard
        └ index.jsx

Local Storageのデータの読み書き

Local Storageの中身はJavaScript内のオブジェクトと同じように、キーと値の組み合わせで出来ています。ただし、キーと値はどちらもただの文字列しか受け付けないことに注意が必要です。

LocalStorageへデータを保存する場合は次のようにします。

localStorage.setItem(<キー文字列>, <値>);

逆にデータを取り出す際には、次のようにします。

const data = localStorage.getItem(<キー文字列>);

このとき、指定されたキーが存在しない場合はnullを返します。

これを利用して、Organisms/TodoCardに、

初期化時にLocal Storageからタスクリストを取り出し、存在したらタスクリストのStateにその値を指定する。
タスクリストのStateが更新されたら、その都度Local StorageへStateの値を保存する。という処理を追加しましょう。

注意するべきは、先ほど書いた通りLocal Storageは文字列しか受け付けないため、配列であるタスクリストのStateはそのままだと保存できないことです。そのため、JavaScript上の配列やオブジェクトといったデータを、復元可能な形の文字列形式であるJSONに変換してから保存する必要があります。 JSON.stringify(<変換前>)で変換、JSON文字列からオブジェクトへの復元はJSON.parse(<JSON文字列>)でできます。

ひとまず完成

アラートの実装