页面加载时更改图像的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是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);   
});