通过变量跨页面修改图片src属性的正确实现方法是什么

原代码错误点 #

• 执行window.location.href页面跳转逻辑后，当前页面的所有后续JS代码会直接终止执行，给新页面元素赋值的逻辑写在原页面完全不会生效
• localStorage存储文本内容用的键名是text，但后续取值时用了不存在的键名textid，永远无法拿到正确的值
• src和textContent属性本身就是字符串类型，多余的toString()调用没有任何意义
• 写死的本地绝对路径跳转兼容性差，更换部署环境会失效，建议使用相对路径

正确实现方案 #

实现逻辑要拆分到两个页面中：

1. 触发跳转的原页面代码

只需要完成取值、存值、跳转三个操作即可：

function Productadd() {
    // 获取当前页面元素的对应内容
    const imageSrc = document.getElementById("pic1").src;
    const textContent = document.getElementById("text1").textContent;
    // 存入localStorage，键名要和后续取值保持一致
    localStorage.setItem("imagesrc", imageSrc);
    localStorage.setItem("text", textContent);
    // 跳转至目标页面，使用相对路径适配不同环境
    window.location.href = "./index3.html";
}

2. 跳转目标页面（index3.html）代码

要在页面加载完成后，从localStorage取值赋值给对应元素：

// 等页面DOM全部渲染完成后再执行操作，避免元素未加载导致报错
window.addEventListener('load', function() {
    // 和存储时的键名严格对应取值
    const savedImageSrc = localStorage.getItem("imagesrc");
    const savedText = localStorage.getItem("text");
    
    // 判空后再赋值，避免空值导致报错
    if(savedImageSrc) {
        document.getElementById("image2").src = savedImageSrc;
    }
    if(savedText) {
        document.getElementById("text2").textContent = savedText;
    }
    
    // 如果数据使用后不需要留存，可以主动清除避免后续残留
    // localStorage.removeItem("imagesrc");
    // localStorage.removeItem("text");
})

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