首页 > 解决方案 > 本地存储示例无法正常工作

问题描述

在我的网络大学课程中,有一个带有本地存储的示例,它说它应该在输入区域显示按钮的点击次数并将其存储在本地存储中,但我得到的只是输入上的 NaN,无论多少次我点击按钮。

<head>
    <script>
        window.onload = function()
        {
        var el=document.getElementById("bt");
        el.onclick= function()
        {
        var x = parseInt(localStorage.getItem("nrc"));
        if (x!==NaN){
        localStorage.setItem("nrc", x + 1);
        }
        else{
        localStorage.setItem("nrc", "1");
        }
        document.getElementById("write").value = localStorage.getItem("nrc");
        }
            document.getElementById("write").value = localStorage.getItem("nrc");
var buton2=document.getElementById("bt2");
        buton2.onlick = function ()
        {
            localStorage.removeItem("nrc");
        }
            }
            </script>
    </head>


    <body>
        <p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
        <button id="bt"> Click</button>
    <button id="bt2"> Click2</button>
    </body>

编辑:问题已解决,但现在如果我想从本地存储中删除一个项目或清除本地存储它不起作用。

标签: javascripthtml

解决方案


您正在检查一个非数字到一个非数字,这将永远是正确的。

无论如何,解决方案已经发布在评论中

<head>
  <script>
    window.onload = function() {
      var el = document.getElementById("bt");
      el.onclick = function() {
        var x = parseInt(localStorage.getItem("nrc"));
        if (!isNaN(x)) {
          localStorage.setItem("nrc", x + 1);
        } else {
          localStorage.setItem("nrc", "1");
        }
        document.getElementById("write").value = localStorage.getItem("nrc");
      }
      document.getElementById("write").value = localStorage.getItem("nrc");
    }
  </script>
</head>


<body>
  <p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
  <button id="bt"> Click</button>
</body>


推荐阅读