Question

我是JS的新手（以前没有做过任何事情），作为学校作业的一部分，这是使用HTML模板的Pyhton服务器，我必须在.tpl文件中创建一个按钮每次点击将使变量增加1：

<script>
var counter=0;
function add1() {
 counter +=1;
 document.getElementById("pplGoing").innerHTML = counter;
}
</script>

HTML部分：

<button onclick="add1()">I'm going</button>
<p> Number of people attending: <span id="pplGoing"></span></p>

该按钮正常工作，每次单击该按钮，数字都会增加1（我知道这很简单，但是正如我之前所说，我没有使用JS的经验）。但是问题在于，每次您返回或刷新页面或重新启动服务器时，pplGoing变量都会被重置为0。是否有可能以某种方式覆盖该变量，因此数字仍然存在吗？该变量存储在.json文件中，该文件用作数据库。谢谢：）

Answer 1

您可以使用localStorage保存变量。或cookies用于在客户端和服务器之间进行保存和同步。

例如

<script>
var counter = 0;

document.addEventListener("DOMContentLoaded", function() {
    counter = localStorage.getItem("counter"); // get value from storage
    document.getElementById("pplGoing").innerHTML = counter; // restore value
});

function add1() {
 counter++;
 localStorage.setItem("counter", counter);
 document.getElementById("pplGoing").innerHTML = counter;
}
</script>

检查documentation。

如何覆盖JS中的变量？

1 个答案: