Question

嘿所以我有一个HTML页面，里面有javascript的这部分更新本地存储：

<script src="../../Website/json/modernizr.js" >
        var button = document.getElementById("btnsave");

        button.addEventListener("click", function(){
            if (Modernizr.localstorage) {
            // window.localStorage is available!
                var drinksElement = document.getElementById("drinks");

                for (var i = 0; i < drinksElement.length-1; i++) {
                    localStorage["box" + i] = drinksElement[i].value;
                }
            } else {
                // no native support for HTML5 storage :(
            }
        });        
</script>

但出于某种原因，它并没有做到它应该做的事情。页面加载正常，没有在控制台上看到任何错误。如果我将此脚本复制并粘贴到开发人员控制台中，然后单击按钮更新本地存储，本地存储将更新，但只有一次，那么它似乎会忘记＆＃34;这个javascript函数。如果我将其复制并粘贴到控制台，然后键入＆＃34;按钮＆＃34;，它将显示按钮变量。我可以继续输入＆＃34;按钮＆＃34;并且它会一直显示按钮变量，直到我点击按钮并更新本地存储。之后，再次调用按钮返回未定义错误的引用。

先谢谢，这一直困扰着我很长一段时间。

Answer 1

您的modernizr引用和javascript代码应该位于不同的脚本标记中。

<script src="../../Website/json/modernizr.js" ></script> 
<script> 
        var button = document.getElementById("btnsave");

        button.addEventListener("click", function(){
            if (Modernizr.localstorage) {
            // window.localStorage is available!
                var drinksElement = document.getElementById("drinks");

                for (var i = 0; i < drinksElement.length-1; i++) {
                    localStorage["box" + i] = drinksElement[i].value;
                }
            } else {
                // no native support for HTML5 storage :(
            }
        });        
</script>

根据规范 - <script> ，

如果存在src属性，则该元素必须为空或仅包含与脚本内容限制匹配的脚本文档。

此外，根据@QuasimodosClone，但是，用户代理不了解<script>代码，它会显示为简单的HTML内容。

Javascript在HTML页面中无效

1 个答案: