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);
});