如何实现刷新页面后保持图片隐藏状态？求助localStorage方案

需求说明 #

现有一组带隐藏/显示按钮的图片，点击按钮隐藏图片后，刷新页面需保持图片隐藏状态，已知可通过localStorage实现，需要具体实现方案。

现有代码 #

Razor 代码 #

int index=0;
foreach (var item in Model.AttachmentsList)
{
    <div style=" display: inline-block;">
        @if (item.FileUrl.Contains(".jpg"))
        {
            @Html.Raw("<a href='../../" + item.FileUrl + "' alt='img'> <img id='photo_" + index + "'  src='../../" + item.FileUrl + "'   > </a>")
        }
        else
        {
            @Html.Raw("<a href='../../" + item.FileUrl + "' target='_blank'>" + item.FileName + "</a>")
        }
    </div>
    <button onclick="togglePhoto(@index)">Hide/Show Photo</button>
    index++;
}

JS 代码 #

<script>
function togglePhoto(index) {
    var photo = document.getElementById('photo_' + index);
    if (photo.style.display === 'none') {
        photo.style.display = 'block';
    } else {
        photo.style.display = 'none';
    }
}
</script>

修改方案 #

1. 调整JS代码，加入localStorage存储与状态恢复逻辑 #

修改后的JS代码会在页面加载时读取localStorage中保存的图片状态，并在切换状态时将新状态存入localStorage：

<script>
// 页面加载完成后恢复图片状态
window.onload = function() {
    // 获取所有ID以photo_开头的图片元素
    const photos = document.querySelectorAll('[id^="photo_"]');
    photos.forEach(photo => {
        // 从ID中提取图片索引
        const index = photo.id.split('_')[1];
        // 读取localStorage中保存的状态
        const savedState = localStorage.getItem(`photoVisibility_${index}`);
        // 根据保存的状态设置显示/隐藏
        if (savedState === 'hidden') {
            photo.style.display = 'none';
        } else {
            photo.style.display = 'block'; // 默认显示
        }
    });
};

function togglePhoto(index) {
    const photo = document.getElementById(`photo_${index}`);
    let newState;
    // 切换显示状态
    if (photo.style.display === 'none') {
        photo.style.display = 'block';
        newState = 'visible';
    } else {
        photo.style.display = 'none';
        newState = 'hidden';
    }
    // 将新状态存入localStorage
    localStorage.setItem(`photoVisibility_${index}`, newState);
}
</script>

2. 优化Razor代码（可选但推荐） #

给图片添加默认的display:block样式，确保第一次加载时style.display有明确值，避免判断逻辑异常：

@Html.Raw("<a href='../../" + item.FileUrl + "' alt='img'> <img id='photo_" + index + "'  src='../../" + item.FileUrl + "' style='display:block;' > </a>")

关键逻辑说明 #

• 状态存储：使用photoVisibility_${index}作为localStorage的键，每个图片的状态独立存储，避免互相干扰。
• 状态恢复：页面加载完成后，遍历所有目标图片，读取对应键的状态并应用到图片上。
• 持久化：localStorage的数据会保存在浏览器中，除非手动清除或通过代码删除，刷新页面后数据依然存在。

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