Javascript 图像交换问题

我使用内联onclick切换页面上用作选项卡的两个图像。交换确实很好，但是当页面重新加载图像时，图像将恢复为主图像。我希望图像保持为“选定”图像，直到单击另一个选项卡

 <img id="image3" src="images/charts1.png" style="display:inline;" onclick="document.getElementById('image3').style.display='none'; document.getElementById('image4').style.display='inline';" "/>

    <img id="image4" src="images/charts2.png" style="display:none;" onclick="document.getElementById('image4').style.display='none'; document.getElementById('image3').style.display='inline';"/>

我的剧本

<script>
    if (document.images) { 
        img1on = new Image();
        img1on.src = "images/over1.jpg"; 
        img1off = new Image(); 
        img1off.src = "images/notover.jpg"; 
        img2on = new Image();
        img2on.src = "images/over2.jpg"; 
        img2off = new Image(); 
        img2off.src = "images/notover.jpg"; 
    }
    function imgOn(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "on.src");}
    }
    function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");}
        }
</script>

if（document.images）{
img1on=新图像（）；
img1on.src=“images/over1.jpg”；
img1off=新图像（）；
img1off.src=“images/notover.jpg”；
img2on=新图像（）；
img2on.src=“images/over2.jpg”；
img2off=新图像（）；
img2off.src=“images/notover.jpg”；
}
函数imgOn（imgName）{
if（document.images）{
文档[imgName].src=eval（imgName+“on.src”）；}
}
函数imgOff（imgName）{
if（document.images）{
文档[imgName].src=eval（imgName+“off.src”）；}
}

从它的声音来看，您希望Javascript中的信息即使在页面刷新后也能保持一种状态，因此您需要使用cookie或localstorage来存储活动选项卡或图像id或其他一些有意义的信息，以便与之关联

这里有一个解决方案，如果本地存储可用，它将使用本地存储，并退回到使用cookie

function imgOn(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "on.src");}
storeUpdate(imgName, imgName + "on.src");
    }
    function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");}
storeUpdate(imgName, imgName + "on.src");
        }

function storeUpdate(key, value){
if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support
localStorage.setItem(key, value);
  }
else
  {
  // Sorry! No web storage support..
var exdays = 10; // Number of days before cookie will expire
setCookie(key, value, exdays);
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

然后在页面加载时，您可以检查是否存在以下cookie：

function getImages(imgName){
if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support
return localStorage.getItem(imgName);
  }
else
  {
  // Sorry! No web storage support..
return getCookie(imgName);
  }
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1)
  {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

---

我看到一个jQuery标记，但您的JavaScript根本没有使用jQuery。您希望JavaScript在页面回发后保留图像src值吗？我同意这一点。那我该怎么做呢？我可以用一两行在jquery中设置状态吗？我已经在上面进行了更新，以反映使用带有cookie回退的localStorage解决方案。无法使其工作，因为我的网络已阻止cookie，谁知道还有什么。