0

localStorageの保存の仕方を教えてください

todoリストを作っています。

<div id="today" class="tab-pane active">
                    <p>今日やること</p>
                    <div class="task-wrapper">
                        <span style="white-space: nowrap;" class="add-task-wrapper">
                                <form id="form-a" class="add-task-wrappers">
                                    <input type="button" value="+" class="add-mark" id="plus-a">
                                    <input style="background-color:rgb(206, 214, 95)"placeholder="今日やることを追加してください" class="add-task" id="WantToAdda"  value="" >
                                </form>
                        </span>
                        <ul id="todolist-a" class="todolist">
                            <!-- todolistを追加 -->
                        </ul>
                    </div>
                </div>
let plusa=document.getElementById("plus-a");
plusa.addEventListener('click',function(){
    let newTask = document.getElementById("WantToAdda").value;
    let lists = document.getElementById("todolist-a");
    if(newTask!=""){
    lists.insertAdjacentHTML("afterbegin","<li><p>◉</p>"+newTask+"<i class='far fa-trash-alt gomi'></i></li>");

inputタグに入れた文字をtodolistとしてのなかに追加していきます。
<li><p>◉</p>*文字列(タスク)*<i class="far fa-trash-alt gomi"></i></li>
という形で追加していきます。

の◉もクリックでマークが変わるようになっています。
マークとタスクをセットで保存したいのですが、どのようにしたらいいのでしょうか?
削除機能もあるので、削除もできるようにします。ページを読み込みなおしたときに、タスクとマークがそのままになるようにしたいです。

配列にしてJSON.stringify()でlocalstorageに保存
localstorageから取り出して JSON.parse() で配列に戻してJavaScriptで追記・編集・削除などを行ってまた保存する際に JSON.stringify() の繰り返し。

と教えてもらったのですが、わかりません。どのタイミングで何をどのように保存するのでしょうか。

1
  • ◉もクリックでマークが変わるようになっています とありますが、該当する処理を行っているコードがないように見えます。現在の状況を再現出来るコードを追記していただけませんか?
    – supa
    2019年10月30日 6:36

2 件の回答 2

0

このようにできます。

var data;

// データを読みます
data = JSON.parse(localStorage.save_data);

// データを読む前にあったのか分岐で掌理します
var save_data = localStorage.save_data;
if (save_data) {
    data = JSON.parse(localStorage.save_data);
    // data によって、アプリを書いてるとか
    ...
} else {
    data = [];
}

// データを localStorage に保存します
localStorage.save_data = JSON.stringify(data);

適当にデモを作ってみた: https://jsfiddle.net/jLcqbdfk/3/ (コードスニペットの機能は CORS のせいで localStorage 使えないので別サイトにいます)

0

乱暴な方法からまともな方法まで3通り紹介します。

A. innerHTMLをそのまま保存・復帰する

  • TODOリストが更新されたとき(提示されているclickハンドラ内や、◉を変更したとき、データを削除したとき)、todolist-a要素の innerHTMLlocalStorageに保存。
  • ページロード時に、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番目の<li>のゴミ箱アイコンが押されたら、配列の3番目の項目を削除する
  • ページロード時にすることは同じ

Cが一番マトモだと思いますが、データ量が少ないならBで十分だと思います。
JavaScriptのデータとHTML表現の対応付けを簡単にできるようにするライブラリが世の中にはたくさんあります。

1
  • Typoありましたね。ありがとうございます。修正しました。
    – int32_t
    2019年10月31日 1:23

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。