Vanilla JS实现页面刷新后保持卡片收藏图标激活状态求助

核心问题梳理 #

1. 原存储逻辑仅保存了通用的show标记，没有记录具体哪张卡片被收藏，无法对应到不同索引的卡片
2. likeCard函数参数为index，但代码中误用了未定义的i变量，会触发运行时报错
3. window.onload的入参是页面加载事件对象，并非卡片索引，自然无法拿到正确的索引值

修复后的代码 #

1. 点击切换收藏状态逻辑

window.likeCard = (index) => {
    // 读取本地存储的收藏卡片索引列表，无数据则默认空数组
    let favList = JSON.parse(localStorage.getItem('favCards') || '[]')
    const image = document.getElementById('fav-active' + index)
    
    if (!image.style.display || image.style.display === 'none') {
        image.style.display = 'block'
        // 收藏时加入索引，避免重复存储
        if (!favList.includes(index)) {
            favList.push(index)
        }
    } else {
        image.style.display = 'none'
        // 取消收藏时移除对应索引
        favList = favList.filter(item => item !== index)
    }
    // 更新后的数据存回本地存储
    localStorage.setItem('favCards', JSON.stringify(favList))
}

2. 卡片渲染+页面加载时状态恢复逻辑

直接在loadData渲染完所有卡片后执行状态恢复即可，无需单独写window.onload，避免出现DOM未渲染完成就操作元素的问题：

const loadData = (data) => {
    let trendSection = document.querySelector('.card-container')
    let content = ''
    for (let i = 0; i < data.length; i++) {
        content += `
                    <img class="image-card" src="${data[i].images.downsized.url}">
                    <div class="custom-overlay-icons">
                        <a type="button"><img class="image_on" src="assets/images/icon-fav.svg" onClick="likeCard('${i}')"><img id="fav-active${i}" src="assets/images/icon-fav-active.svg"></a>
                       // 默认CSS中fav-active的display为none
                    </div>`
    }
    trendSection.innerHTML = content

    // 渲染完成后恢复所有收藏卡片的激活状态
    const favList = JSON.parse(localStorage.getItem('favCards') || '[]')
    favList.forEach(index => {
        const favImg = document.getElementById('fav-active' + index)
        // 加层判断避免数据异常时报错
        if (favImg) favImg.style.display = 'block'
    })
}

注意事项 #

如果卡片数据是异步请求获取的，确保请求完成拿到数据后再调用loadData即可，无需额外绑定页面加载事件。

内容的提问来源于stack exchange，提问作者Nataly