ReactでTodoアプリ作成17(データの永続化)

今まではほとんど出来ましたが、ブラウザをリロードすると、このようにデータがリセットされてしまうので Local Storage を使って永続化してあげましょう。

LocalStorageを使ってデータの永続化を行う方法について見ていきます。

LocalStorage
不要なコードの削除

React ではコンポーネントに Lifecycle が定義されていて、さまざまなタイミングで指定した処理をはさみ込むことが出来ます。
今回データを保存したいのは、コンポーネントが更新されるタイミングなので App コンポーネントの中で、 componentDidUpdate() という特殊なメソッドに実装してあげれば OK でしょう。
localStorage に setItem() してあげれば OK ですね。

       componentDidUpdate() {
         localStorage.setItem('todos', JSON.stringify(this.state.todos));
       }

キーは todos としてあげて state の値を保持したいのですが、 JSON にしてあげれば OK かと思います。
ではリロードしてあげて、適当に Todo を追加して Local Storage を確認していきましょう。
Application の Local Storage の file を見れば良いです。
 todos というキーでちゃんと値が保持されているのがわかります。

後はデータの読み込みですが、コンポーネントがマウントされる際に Local Storage に読み込んであげれば OK でしょう。
componentDidMount() という特殊なメソッドが使えるのでそちらに書いていきます。
this.setState() としてあげて todos の中身を Local Storage の中身にしたいのですが、 JSON で parse() しつつ getItem() としてあげれば OK です。

      componentDidMount() {
         this.setState({
           todos: JSON.parse(localStorage.getItem('todos')) || []
         });
       }

上手くいかなかったときは空配列にしてあげます。

ではこれで見てあげるとちゃんと先ほど保存したデータが読み込まれています。
また、適当にデータを追加したり削除したりしてみてリロードするとちゃんとデータが保持されているので OK でしょう。

かけ足で見ていきましたが React を使った開発の一例として参考にしてみてください。