如何修改DOM操作代码，实现图片从头替换且刷新后保留效果？

问题背景 #

我有一个包含三张图片的简单HTML文档，其中一张图片的代码如下：

<p><a href="https://i.sstatic.net/L4Wzi.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/L4Wzi.png" alt="enter image description here" /></a></p>

需求是：点击按钮时从开头开始将图片替换为其alt文本，且页面刷新后要保留替换后的效果（刷新后呈现的效果示例代码）：

<p><a href="https://i.sstatic.net/Lw45p.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Lw45p.png" alt="enter image description here" /></a></p>

现有代码 #

export default () => {

    const button = document.querySelector('#b1');
    
    const listener = e => {
        const images = document.getElementsByTagName('img');

//        for(let i = 0; i <= images.length; i++) {
        for(let i = images.length - 1; i >= 0; i--) {
            const image = images[i];
            if(image.alt) {
                let text = document.createTextNode(image.alt);
                image.parentNode.replaceChild(text, image);
            }
        }
        
        const style = `
            color: yellow; 
            border: 2px solid yellow;
        `;
        
        button.setAttribute('style', style);
        button.style.backgroundColor = 'red';
        
        button.disabled = true;
        button.textContent = 'Disabled';
    };
    
//    button.onclick = listener;
    button.addEventListener('click', listener);
};

尝试的修改 #

我把循环改成了下面这样，能实现目标视觉效果，但页面一刷新，替换的效果就没了：

for(let i = images.length - 1; i >= 0; i=i-2) {
    const image = images[i];
    if(image.alt) {
        let text = document.createTextNode(image.alt);
        image.parentNode.replaceChild(text, image);
    }
}

解决方案 #

页面刷新后状态消失，是因为JavaScript的DOM修改都是临时的，刷新后页面会重新加载原始HTML。要解决这个问题，关键是把哪些图片被替换的状态存起来，比如用浏览器的localStorage，页面加载时再读取状态自动恢复。

修改后的完整代码如下：

export default () => {
    const button = document.querySelector('#b1');

    // 页面加载时自动恢复之前的替换状态
    const restoreImageState = () => {
        // 从localStorage读取已替换的图片索引列表
        const replacedImages = JSON.parse(localStorage.getItem('replacedImages')) || [];
        const images = document.getElementsByTagName('img');
        
        // 按照之前的逻辑执行替换
        for(let i = images.length - 1; i >= 0; i=i-2) {
            const image = images[i];
            if(image.alt && replacedImages.includes(i)) {
                const text = document.createTextNode(image.alt);
                image.parentNode.replaceChild(text, image);
            }
        }

        // 如果已经有替换记录，同步更新按钮状态
        if(replacedImages.length > 0) {
            const style = `
                color: yellow; 
                border: 2px solid yellow;
            `;
            button.setAttribute('style', style);
            button.style.backgroundColor = 'red';
            button.disabled = true;
            button.textContent = 'Disabled';
        }
    };

    const listener = e => {
        const images = document.getElementsByTagName('img');
        const replacedImages = [];

        // 执行图片替换，同时记录被替换的图片索引
        for(let i = images.length - 1; i >= 0; i=i-2) {
            const image = images[i];
            if(image.alt) {
                const text = document.createTextNode(image.alt);
                image.parentNode.replaceChild(text, image);
                replacedImages.push(i);
            }
        }

        // 把替换状态存入localStorage，持久化保存
        localStorage.setItem('replacedImages', JSON.stringify(replacedImages));

        // 更新按钮样式和状态
        const style = `
            color: yellow; 
            border: 2px solid yellow;
        `;
        button.setAttribute('style', style);
        button.style.backgroundColor = 'red';
        button.disabled = true;
        button.textContent = 'Disabled';
    };

    // 页面初始化时先恢复状态
    restoreImageState();
    button.addEventListener('click', listener);
};

额外提示 #

• 如果页面中图片的顺序或数量可能变化，建议给每个图片添加唯一的data-id属性，用这个id作为存储标识，比用索引更可靠。
• 如果需要清除保存的状态，可以调用localStorage.removeItem('replacedImages')。

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