Question

我正在尝试创建一个计算已加载次数的网页。此号码将显示给用户。我正在使用localhost MAMP。这是我正在使用的代码：

<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <h1 id="counter"> 1 </h1>
    <script>
        function increase(){
            var counterElement = document.getElementById("counter");
            var counter = counterElement.textContent;
            counter++;
            counterElement.innerHTML = counter;
        }

        window.onload = increase;
       </script>
</body>
</html>

仅在第一次加载页面时才会增加计数器变量。在随后的刷新是什么都不做。柜台只停留2.我做错了什么？我认为innerHTML属性在页面中插入了新的html。在页面刷新期间，HTML似乎不会持续存在。是否有更好的替代方法来创建页数？它只会用于个人，因此不良的性能不是问题。

Answer 1

这是一个使用本地存储来计算您访问该页面的时间的计数器：

https://jsfiddle.net/e2q8j1q4/

<div id="counter"></div>
<script>
    var n = localStorage.getItem('on_load_counter');
    if (n === null) {
        n = 0;
    }
    n++;
    localStorage.setItem("on_load_counter", n);
    document.getElementById('counter').innerHTML = n;
</script>

注意：您很可能希望使用某些服务器端脚本/存储来执行正确的页面点击计数器（从所有用户统计并永久存储计数）。

Answer 2

不幸的是，脚本无法更新html页面本身的实际内容。由于您已将计数器设置为1，因此它永远不会高于2.

使用innerHTML属性创建页面加载计数器

2 个答案: