はじめてのWebアプリ制作:記録を保存する

保存形式を決める

app.js の冒頭付近に追加します。

const STORAGE_KEY = 'study-log-records-v1';

function saveRecords() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(records));
}

localStorageが保存できるのは文字列です。JSON.stringify() で配列を文字列へ変換します。記録を追加した直後と削除した直後、renderRecords() の前に saveRecords() を呼びます。

records.push({ id: crypto.randomUUID(), date, content });
saveRecords();
renderRecords();
records = records.filter((record) => record.id !== button.dataset.id);
saveRecords();
renderRecords();