7. ローカルストレージによる保存

この章の目的

ページをリロードしてもデータを保持できる「ローカルストレージ」の仕組みを学びます。

ローカルストレージとは？

ブラウザにデータを保存して、次回アクセス時に読み込むことができる機能です。

保存と読み込みの基本

保存:

localStorage.setItem("key", JSON.stringify(data));

読み込み:

const saved = localStorage.getItem("key");
if (saved) {
  const data = JSON.parse(saved);
}

ToDoアプリでの実践例

保存時（タスクの追加・削除・更新）:

function saveTasks() {
  localStorage.setItem("taskGroups", JSON.stringify(taskGroups));
}

読み込み時（ページ初期化）:

function loadTasks() {
  const saved = localStorage.getItem("taskGroups");
  if (saved) {
    taskGroups = JSON.parse(saved);
    for (const groupName in taskGroups) {
      renderGroup(groupName);
      updateProgress(groupName);
    }
  }
}

注意点と活用例