Question

这是一个网页，您可以从三个单选按钮中选择背景图片。我想在localstorage中保存所选的一个，所以当页面刷新时，最后选择的背景图像就会出现。事实并非如此，我无法理解为什么，是吗？在此先感谢：）

 <!DOCTYPE html>
    <html manifest="my.manifest">
    <head>
    <script src="modernizr.js"></script> 

    <script>
    function setBg() {
        myForm = document.getElementById("bgList");
        for (var i = 0; i < myForm.land.length; i++) {
            if (myForm.land[i].checked) {
                break
            }
        }
        document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";

        if (Modernizr.localstorage) { 
            localStorage.setItem("background", i); 
            //alert(localStorage.getItem("background"));
        }
        else{
            alert("Can not be saved to localstorage!");
        }
    }
    </script>
    </head>

    <body>

    // Sørger for å velge et bakgrunnsbilde når siden lastes
    <script src="modernizr.js">
        window.onload = function(e){
            mittLand = 0;
            if (localStorage.getItem("background") != null) {
                mittLand = parseInt(localStorage.getItem("background")); 
                alert(mittLand); 
            }
            myForm = document.getElementById("bgList");
            myForm.land[mittLand].checked=true;
            setBg();
        }
    </script>

    <form id="bgList">
        <h1>Velg ditt favorittland</h1>
        <input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
        <input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
        <input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
    </form>

    </body>
    </html>

Answer 1

我不明白哪部分不起作用？警报正确显示所选选项，但由于您在设置背景之前正在进行警报，因此在警报时背景不是样式，按警报后图像设置正确。

<!DOCTYPE html>
<html>
<head>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

    <script>
        function setBg() {
            myForm = document.getElementById("bgList");
            for (var i = 0; i < myForm.land.length; i++) {
                if (myForm.land[i].checked) {
                    break
                }
            }
            document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";

            if (Modernizr.localstorage) {
                localStorage.setItem("background", i);
                //alert(localStorage.getItem("background"));
            }
            else{
                alert("Can not be saved to localstorage!");
            }
        }
    </script>
</head>

<body>

// Sørger for å velge et bakgrunnsbilde når siden lastes
<script>
    window.onload = function(e){
        mittLand = 0;
        if (localStorage.getItem("background") != null) {
            mittLand = parseInt(localStorage.getItem("background"));
            alert(mittLand);
        }
        myForm = document.getElementById("bgList");
        myForm.land[mittLand].checked=true;
        setBg();
    }
</script>

<form id="bgList">
    <h1>Velg ditt favorittland</h1>
    <input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
    <input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
    <input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
</form>

</body>
</html>

尝试使用此代码。更新了modernizr

刷新页面时，存储在localstorage中的变量将消失

1 个答案: