js实现收藏按钮功能

<button id="favoriteBtn">收藏</button>
<span id="favoriteStatus"></span>

// 获取DOM元素
const favoriteBtn = document.getElementById('favoriteBtn');
const favoriteStatus = document.getElementById('favoriteStatus');

// 检查是否已收藏
const isFavorited = localStorage.getItem('isFavorited') === 'true';

// 根据收藏状态更新UI
if (isFavorited) {
    favoriteBtn.textContent = '取消收藏';
    favoriteStatus.textContent = '已收藏';
} else {
    favoriteBtn.textContent = '收藏';
    favoriteStatus.textContent = '未收藏';
}

// 添加点击事件监听器
favoriteBtn.addEventListener('click', () => {
    // 切换收藏状态
    const newStatus = !isFavorited;
    localStorage.setItem('isFavorited', newStatus);

    // 更新UI
    if (newStatus) {
        favoriteBtn.textContent = '取消收藏';
        favoriteStatus.textContent = '已收藏';
    } else {
        favoriteBtn.textContent = '收藏';
        favoriteStatus.textContent = '未收藏';
    }
});