如何实现页面刷新后数值保持累加不重置？

你的问题核心是数值仅存在内存变量中，页面刷新后内存被清空，数值自然重置。要实现刷新后持续累加，需要用浏览器的localStorage做本地持久化存储，它会把数据存在用户浏览器中，刷新页面也不会丢失。

先修正你代码里的一个小bug：JS中document.getElementById('num1')对应的HTML元素ID是num9，这个错误会导致数值无法更新，先把它改过来。

以下是修改后的完整代码：

HTML部分 #

Here is the number

<form method="POST">
    <div style="background-color: white; display: flex; flex-wrap: nowrap; justify-content: space-evenly; margin-bottom: 15px; border-radius: 5px;">
        <p id="num" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
        <p id="num9" name="num1" style="color: yellow; margin-top: 10px; margin-left: -15px;" class="number_border">0</p>
    </div>
</form>

CSS部分（无需修改） #

Here is the design of the number
<style type="text/css">
    .number_border{
        text-align: center;
        border-radius: 5px;
        background: red;
        width: 20px;
        height: 30px;
    }
</style>

JS部分（核心修改） #

Here is the function to let the number can increase by 1 every 0.5 second
<script>
    // 从localStorage读取初始值，没有则设为0
    var number1 = parseInt(localStorage.getItem('number1')) || 0;
    var number2 = parseInt(localStorage.getItem('number2')) || 0;
    // 修正元素ID：原num1改为num9
    var el = document.getElementById('num9');
    var el1 = document.getElementById('num');

    // 页面加载时先渲染存储的数值
    el.innerText = number1;
    el1.innerText = number2;

    function incrementSeconds() {
        if (number1 < 9){
            number1 += 1;
            el.innerText = number1;
        }else if (number2 < 9) {
            number1 = 0;
            el.innerText = number1;
            number2 += 1;
            el1.innerText = number2;
        }
        // 每次更新后把数值保存到localStorage
        localStorage.setItem('number1', number1);
        localStorage.setItem('number2', number2);
    }

    var increase = setInterval(incrementSeconds, 500);
</script>

关键修改说明 #

1. 初始化数值：从localStorage中读取之前保存的number1和number2，如果是第一次打开页面（没有存储数据），就默认设为0。
2. 页面渲染：加载页面时先把存储的数值渲染到元素上，避免刷新后先显示0再跳转。
3. 同步存储：每次数值更新后，立刻把最新值存入localStorage，确保刷新后能读取到最新状态。
4. 修复元素ID：原JS代码中获取的ID和HTML中的ID不匹配，修正后才能正常更新DOM。

内容的提问来源于stack exchange，提问作者Neptunium