在没有服务器端语言的情况下保存一个在按钮单击时增加的数字

Question

当用户单击没有任何server-side语言的按钮时，是否有一种简单的方法可以保存增加的数字？ 这是我的代码：

 var num = 0; var button = document.getElementById("coinBtn"); function coin() { num += 1; var numbers = document.getElementById("coinAm"); //upgrade level for printing var upgradeLevel = document.getElementById("upgradeLevel"); numbers.innerHTML = num; }

 <h1 id="coinAm" class="num"> 0 </h1> <br> <br> <img onclick="coin()" id="coinBtn" src="https://media3.giphy.com/media/Ihy0gO3MVhUqSY2jvS/giphy.gif?cid=19f5b51a1eda5f2b05af92f92452b8612b5e02a276803f0d&rid=giphy.gif">

Answer 1

执行“类似保存”功能的最快方法是使用localStorage 。

所以你可以做这样的事情：

var num = 0;

var button = document.getElementById("coinBtn");

function coin() { 
    num += 1;
    var numbers = document.getElementById("coinAm");

        //upgrade level for printing
    var upgradeLevel = document.getElementById("upgradeLevel");

    numbers.innerHTML = num;
    localStorage.setItem('num', num); // save to localStorage 

}

然后从localStorage读回来，你可以做localStorage.getItem('num');

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

您可以根据需要使用localStorage或sessionStrorage 。

localStorage.setItem("coinCount", num)保存项目。 localStorage.getItem("coinCount")获取页面上的项目重新加载以获取先前的计数。

注意：由于安全问题，实时示例将不起作用。

 var num = Number(localStorage.getItem("coinCount") || 0); //var num = Number(sessionStrorage.getItem("coinCount") || 0); var button = document.getElementById("coinBtn"); function coin() { num += 1; var numbers = document.getElementById("coinAm"); //upgrade level for printing var upgradeLevel = document.getElementById("upgradeLevel"); numbers.innerHTML = num; localStorage.setItem("coinCount", num) //sessionStrorage.setItem("coinCount", num) }

 <h1 id="coinAm" class="num"> 0 </h1> <br> <br> <img onclick="coin()" id="coinBtn" src="https://media3.giphy.com/media/Ihy0gO3MVhUqSY2jvS/giphy.gif?cid=19f5b51a1eda5f2b05af92f92452b8612b5e02a276803f0d&rid=giphy.gif">