質問: document.getElementById("todolist-a"); if(newTask!=""){ lists.insertAdjacentHTML("afterbegin","◉"+newTask+""); ``` inputタグに入れた文字をtodolistとしてのなかに追加していきます。 `◉*文字列(タスク)*` という形で追加していきます。 の◉もクリックでマークが変わるようになっています。 マークとタスクをセットで保存したいのですが、どのようにしたらいいのでしょうか? 削除機能もあるので、削除もできるようにします。ページを読み込みなおしたときに、タスクとマークがそのままになるようにしたいです。 > > 配列にしてJSON.stringify()でlocalstorageに保存 > > localstorageから取り出して `JSON.parse()` で配列に戻してJavaScriptで追記・編集・削除などを行ってまた保存する際に `JSON.stringify()` の繰り返し。 > > > と教えてもらったのですが、わかりません。どのタイミングで何をどのように保存するのでしょうか。
回答: 乱暴な方法からまともな方法まで3通り紹介します。 A. innerHTMLをそのまま保存・復帰する * TODOリストが更新されたとき(提示されているclickハンドラ内や、◉を変更したとき、データを削除したとき)、`todolist-a`要素の `innerHTML`を`localStorage`に保存。 * ページロード時に、`localStorage`内にデータがあれば、そのデータを`todolist-a`要素の`innerHTML`にセット。 提示されているコードに数行足せば実現できますが、まったくもって雑な方法であり、リスト内のマークアップを変更することが難しくなります。ふつうはこの手段は取らないでしょう。 B. HTMLを一次情報とし、必要なときだけデータ配列を生成する * TODOリストが更新されたとき、`todolist-a`内のDOM構造を調べて、以下のような配列を構築し、`JSON.stringify()`して`localStorage`に保存 ``` [ {status:'◉', task:'家賃を払う'}, {status:'◉', task:'〇〇さんのメールに返答する'}, ] ``` * ページロード時に、`localStorage`内にデータがあれば`JSON.parse()`で配列データを復帰して、その配列データから`todolist-a`内のマークアップを再構築 C. 配列を一次情報とする * 上記のような配列を保存する都度構築するのではなく、常に保持しておく。 * TODO項目に変更があった場合は、該当する配列要素を見つけてそこだけを更新し、`JSON.stringify()`と`localStorage`で保存する。例: 3番目ののゴミ箱アイコンが押されたら、配列の3番目の項目を削除する * ページロード時にすることは同じ Cが一番マトモだと思いますが、データ量が少ないならBで十分だと思います。 JavaScriptのデータとHTML表現の対応付けを簡単にできるようにするライブラリが世の中にはたくさんあります。