javascript - 页面加载时更改图像的 src

Question

我正在尝试更改图像的src，一旦更改后，它就会在整个网站上保持这种状态。

<img id="profile" src="profilePicture.jpg">
<input type="text" name="image" id="imgLink">
<button type="button" id="upload">Upload</button>

jQuery:

$(document).ready(function () { 
    var link;
    $("#upload").click(function (){
        link = $("#imgLink").val();
        $("#profile").prop('src', link);
    });
    $("#profile").prop('src', link);   
  });

正如你所看到的，我尝试将图像的链接存储在全局变量(var link)中，在函数内部更改图像的src，然后在外部再次更改它，以便页面加载时会加载图像。

更改图像的 src 有效，但是一旦我刷新页面或转到另一个页面并返回，图像就不再更改。

如何才能使其在整个网站上保持变化？

Answer 1

通常您会在服务器端执行此操作，因为客户端解决方案仅适用于用户正在使用的一种浏览器。

$(function () { 
    //read localstorage
    var link = localStorage.getItem("myImage") || ""; //change "" to default value
    $("#upload").click(function (){
        link = $("#imgLink").val();
        $("#profile").prop('src', link);
        localStorage.setItem("myImage", link); //set localstorage with new value. 
    });
    $("#profile").prop('src', link);   
});