JS FIDDLE

Question

我对编码很陌生。我使用Codecademy.com自学了大量的Javascript。我试图扩展我的视野并制作一个简单的保存游戏代码。用户可以单击按钮，每次单击都会为其分数添加+1。我想这样做，以便如果用户离开浏览器，他或她可以回去看看之前的分数。这是javascript：

$(document).ready(function() {
    localStorage.setItem('clicks', 0);
    $('#total-clicks').text(Number(localStorage.clicks));

    $('.click-here').click(function() {
        localStorage.clicks = Number(localStorage.clicks) + 1;
        $('#total-clicks').text(localStorage.getItem('clicks'));
    });
});

看起来我做得对，但它没有用。让我知道如何解决这个问题和/或我做错了什么。我不是100％确定网络存储是如何工作的，如果有人有任何好的参考资料来帮助我，请告诉我。感谢。

Answer 1

您在每次加载时都会覆盖它。在设置之前检查一个值。

if (localStorage.getItem("clicks") === null) {
    localStorage.setItem('clicks', 0);
}

Answer 2

这是因为您每次加载时都会将其初始化为0。

所以你检查它是否第一次设置，如果不是......然后设置它：

$(document).ready(function () {
    if (!localStorage.clicks) {
        localStorage.setItem('clicks', 0);
    }
    $('#total-clicks').text(Number(localStorage.clicks));
    $('.click-here').click(function () {
        console.log('+1!');
        localStorage.clicks = Number(localStorage.clicks) + 1;
        $('#total-clicks').text(localStorage.getItem('clicks'));
    });

});

为什么这个网络存储代码不起作用？

2 个答案:

JS FIDDLE