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

ホームページ読み込みと同時に保存されたデータを表示できるようにします。

const todos = JSON.parse(localStorage.getItem("todos"));
if (todos) {
  todos.forEach((todo) => {
    add(todo);
  });
}

JSON.parse(localStorage.getItem("todos"));

で保存してあるデータを使えるようにして"if"ということで
もし、配列"todos"にデータが入っていれば以下

 todos.forEach((todo) => {
    add(todo);
  });

を実行ということにになります。入っていなければ何も実行されません。

関数add()にも少し付け加えます。

function add(todo){}

と引数を使った処理を作ります。このtodoのデータを使って

  if (todo) {
    todoText = todo.text;
  }

という処理をします。ここでも"if"ということで"todo"に何か入っていれば、

todoText = todo.text;

を実行します。"todo.text"を"todoText"を代入することで画面表示のリストに追加してHTML上に実際に見える形にしていきます。

これで保存されたデータがある場合はホームページ上で見えるようになります。

保存ができるようになったので、削除の機能も追加したいと思います。まず削除のタイミングを考えないといけないので、今回は"contextmenu"を表示するタイミング、マウスの右クリックするタイミングとします。その命令としては、

addEventListener

で操作した時の動作を命令します。削除するには

li.remove();

という命令。そしてその状態を"saveData();"で保存します。

  li.addEventListener("contextmenu", function (event) {
    event.preventDefault();
    li.remove();
    saveData();
    });

ここで全体を確認しておきます。

const form = document.getElementById("form");
const input = document.getElementById("input");
const ul = document.getElementById("ul");


const todos = JSON.parse(localStorage.getItem("todos"));
if (todos) {
  todos.forEach((todo) => {
    add(todo);
  });
}

form.addEventListener("submit", function (event) {
  event.preventDefault();
  add();
});

function add(todo){

  let todoText = input.value;

  if (todo) {
    todoText = todo.text;
  }

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

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

    li.addEventListener("contextmenu", function (event) {
    event.preventDefault();
    li.remove();
    saveData();
    });

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

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

    lists.forEach((li) => {

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

これで入力欄に文字を入れて"return"するとリスト表示されると同時に保存され、リロードしても消えません。そして右クリックすることで削除もできるようになりました。