Newer
Older
highschool / favoritesgood.js
document.addEventListener('DOMContentLoaded', () => {
  const favoritesList = document.getElementById('favorites-list');

    // localStorage からデータを取得
  let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');

  // リストを描画する関数
  function renderList(items) {
    favoritesList.innerHTML = ''; // リストをリセット
    if (items.length === 0) {
      favoritesList.innerHTML = '<li>行きたいお店はまだ登録されていません。</li>';
    }
    items.forEach((item, index) => {
      const li = document.createElement('li');
      li.className = 'favorite-item';

      // 店舗名と追加日時を表示
      li.innerHTML = `
        <span class="favorite-name">${item.name}</span>
        <span class="favorite-date">${new Date(item.addedAt).toLocaleString()}</span>
        <button class="delete-btn" data-index="${index}">削除</button>
      `;

      favoritesList.appendChild(li);
    });

    // 削除ボタンにイベントリスナーを追加
    document.querySelectorAll('.delete-btn').forEach(button => {
      button.addEventListener('click', (event) => {
        const index = event.target.dataset.index;
        deleteFavorite(index);
      });
    });
  }

  // 削除する関数
  function deleteFavorite(index) {
    favorites.splice(index, 1); // 該当のデータを削除
    localStorage.setItem('favorites', JSON.stringify(favorites)); // 更新されたデータを localStorage に保存
    renderList(favorites); // 再描画
  }

  // 初期表示(追加日時順)
  renderList(favorites);
});