Question

Hello ，这是可以更改图像src的代码，我正在离线使用它。它有2个按钮，其中一个打开灯，另一个关闭它。它运作良好！ 但问题是它不记得我重新加载页面后做出的选择。防爆。如果我打开灯，它会显示发光的灯泡，但在重新加载后会忘记。注意：我已经尝试了一些在线解决方案，但由于它是关于与javascript相关的东西，它似乎不起作用。 目标仅限Chrome！

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.
</p>
<button 
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on 
the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button 
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off 
the light</button>
</body>
</html>

Answer 1

您可以使用最现代浏览器支持的localstorage或使用cookie。

如果不使用像这样的cookie，我会做的是检查函数是否支持localstorage

function localStorageExists(){
    try {
        localStorage.setItem(simpleTest, simpleTest);
        localStorage.removeItem(simpleTest);
        return true;
    } catch(e) {
        return false;
    }
}

function saveOption(value) {
    if(localStorageExists() === true){
        // available use local storage
        localStorage.setItem(option, value);
    }else{
        // unavailable use cookie
        createCookie("option", value, 30);
    }
}

function createCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

你也可以有一个检测和读取的功能;）

Answer 2

如前所述，您可以使用localStorage存储src并在下一页加载时加载它。要将此用作示例，您可以使用以下代码： -

<强> HTML

<button id="btn1">Turn on the light</button>
<img id="myImage" src="off.png">
<button id="btn2">Turn off the light</button>

<强> JS

//set src on page load
if(localStorage.imgSrc) {
  document.getElementById('myImage').src = localStorage.imgSrc;
}

//set src and localStorage on click
document.getElementById('btn1').onclick = function() { 
    localStorage.imgSrc = document.getElementById('myImage').src = 'on.png'; 
}
document.getElementById('btn2').onclick = function() { 
    localStorage.imgSrc = document.getElementById('myImage').src = 'off.png'; 
}

如何让网页记住通过javascript更改属性做出的选择？

2 个答案: