javascript - 为什么此网络存储代码不起作用？

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

那是因为每次加载时都会将其初始化为 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'));
    });

});

JS FIDDLE