やっぱり。JavaScript！- ToDoリスト - 3

保存する仕組みを作っていきます。リロードしても消えないようにします。ブラウザに保存する方法については

Window.localStorage - Web API | MDN

localStorageで複数のデータを保存する ｜ Tips Note by TAM

localStorageは、cookieのようにデータをブラウザで永続的に保存できる仕組みで、データは、キー（key）と値（value）の組み合わせで保存されます。

基本はKey,valueをワンセットで保存します。

localStorage.setItem(key, value);

データの取り出しは

localStorage.getItem(key);

keyを指定して取り出します。

今回は複数のデータをまとめて、オブジェクトとして1つのキー（key）に配列として保存します。配列を保存するには下が必要になります。

データを保存する前に、文字列に一旦変換する必要があります。
JSON形式のデータを文字列に変換するために、JSON.stringify()メソッドを利用します。

localStorage.setItem("todos", JSON.stringify(todos));

JSON形式での保存となります。JSONについては

JSON - JavaScript | MDN

保存方法はこんな感じで保存が可能ですがコードに落としていきます。

function saveData() {
   // 処理
}

というような関数を作ります。実際の処理はまず、追加していくリストを取得しないといけないので、

 const lists = document.querySelectorAll("li");

としてHTMLから"li"部分を抜き出し配列"lists"に内容を代入します。

そして、さらに保存する文字を抜き出して保存するデータを入れる配列を作り、

 const todos = [];

繰り返しループを使って配列"todos"に配列"lists"のデータを追加していきます。forEach()で繰り返し処理をして一つずつ"lists"のデータを取り出し、push()という命令を使ってリストの内容(li.innnerText)を追加します。

   lists.forEach((li) => {

      todos.push({text:li.innerText});

  });

最後にlocalStorageに保存します。

 localStorage.setItem("todos", JSON.stringify(todos));

関数全体は以下となります。

function saveData() {
  const lists = document.querySelectorAll("li");
  const todos = [];

    lists.forEach((li) => {

      todos.push({text:li.innerText});

  });

  localStorage.setItem("todos", JSON.stringify(todos));
}

この関数をリストを追加する関数add()の一番下に入れて、リストを追加すると同時に保存します。

function add(){

  let todoText = input.value;

  if (todoText) {
    const li = document.createElement("li");

    li.innerText = todoText;
    li.classList.add('list-group-item')

    ul.appendChild(li);
    input.value = "";

　　 saveData()

  }
}

仕組みとしては保存の仕組みはできました。この保存したデータを画面に表示させる仕組みを作っていきます。