带有 LocalStorage 系统的 JavaScript Clicker答案

【问题标题】：JavaScript Clicker With LocalStorage System带有 LocalStorage 系统的 JavaScript Clicker
【发布时间】：2017-07-09 22:27:50
【问题描述】：

我是 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>

【问题讨论】：

你在哪里/如何打电话给datenAbrufen？ onClick?
<body onload="datenAbrufen()"> 和 <div id="fullpage" onClick="onClick()"> @T.J.Crowder

标签： javascript jquery html local-storage

【解决方案1】：

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

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

需要将字符串解析成数字：

function datenAbrufen() {
  clicks = parseInt(localStorage.getItem("aktuelleKlicks"), 10) || 0; // ***
  document.getElementById("clicks").innerHTML = clicks;
}

parseInt 将使用给定的数字基数（10 = 十进制）解析字符串。如果不能，则返回NaN，所以|| 0之后，如果本地存储中的数字无效，则取0。

实时示例：https://jsfiddle.net/dfonxrtq/（遗憾的是，堆栈片段不允许本地存储）

【讨论】：

【解决方案2】：

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

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

【讨论】：