Question

我是JavaScript新手，我写了一个小计数器。现在，我将使用LocalStorage保存点击，并在启动网站时打开数据。它也有效，但是当我重新加载页面时，当我触发onClick函数时，变量的数量不计入它，而是数字总是附加到变量上。

<script type="text/javascript">

    var clicks = 0;

    function datenAbrufen() {
      clicks = localStorage.getItem("aktuelleKlicks");
      document.getElementById("clicks").innerHTML = clicks;
    }

    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
        datenSpeichern();
    };

    function datenSpeichern() {
        localStorage.setItem("aktuelleKlicks", clicks);
    };

    function trash() {
      clicks = -1;
      document.getElementById("clicks").innerHTML = clicks;
    }

</script>

Answer 1

localStorage将数据存储为字符串，如果您尝试向字符串添加内容，则执行＆＃34;字符串添加＆＃34;这实际上是连接你想要做的是convert你从localStorage读回的数据。

clicks = parseInt(localStorage.getItem("aktuelleKlicks"), 10);

Answer 2

我将假设您在页面加载时调用datenAbrufen，并在点击时调用onClick。

如果是，问题出在datenAbrufen：localStorage存储字符串。因此clicks = localStorage.getItem("aktuelleKlicks");将clicks设置为字符串。然后clicks += 1 将数字1追加到字符串的末尾。（在第一页加载时，clicks将设置为null。在这种情况下有效，因为当clicks += 1为clicks时null最终为1 1}}，因为+=将null强制转换为0。+ [因此+=]需要数字或字符串;当{{1}它是一个字符串，它执行字符串连接;如果clicks是一个数字，它会添加;否则，它会强制执行，这取决于它的强制转换。clicks强制转换为{{1}在那种情况下。）

您需要将字符串解析为数字：

null

0将使用给定的数字基数（10 =十进制）解析字符串。如果不能，则会返回function datenAbrufen() { clicks = parseInt(localStorage.getItem("aktuelleKlicks"), 10) || 0; // *** document.getElementById("clicks").innerHTML = clicks; }，如果本地存储中的数字无效，则parseInt将返回NaN。

实例：https://jsfiddle.net/dfonxrtq/（遗憾的是，Stack Snippets不允许本地存储）

使用LocalStorage系统的JavaScript Clicker

2 个答案: