如何在JavaScript中实现自动递增并通过localStorage持久化数值？

你的代码问题出在没有用localStorage存储实际的递增数值，只是存了固定字符串，而且初始化时也没从localStorage读取之前保存的值，导致刷新后数值重置。下面是修复后的完整实现：

核心修改点 #

• 初始化数值时，优先读取localStorage中保存的值，不存在则用默认的{{total_investment}}
• 每次递增后，将最新的数值存入localStorage
• 优化定时器调用方式，避免字符串解析的性能问题

完整代码 #

<script>
    // 初始化：优先从localStorage读取已保存值，无则用默认值
    let i = localStorage.getItem('miningValue') 
        ? parseInt(localStorage.getItem('miningValue')) 
        : {{total_investment}};

    // 单独抽离DOM更新逻辑，避免重复代码
    function updateDisplay() {
        document.getElementById('money-generated').innerHTML = `₦${Number(i).toLocaleString('en')}.00`;
    }

    function increment() {
        i++;
        updateDisplay();
        // 将最新数值存入localStorage持久化
        localStorage.setItem('miningValue', i.toString());
    }

    // 页面加载时先渲染一次初始值
    updateDisplay();
    // 定时器直接传入函数引用，更安全高效
    setInterval(increment, 6400);
</script>

关键细节说明 #

1. localStorage存储逻辑：用miningValue作为键存储实际数值，而非固定字符串，这样才能保留每次递增后的结果
2. 初始化逻辑：页面加载时先检查localStorage的保存值，有则复用，无则使用模板变量的默认值，彻底解决刷新重置问题
3. 分离渲染函数：把DOM更新抽成独立函数，既避免重复代码，也能让页面加载时立刻显示当前数值
4. 定时器优化：直接传递函数引用代替字符串调用，减少不必要的字符串解析，提升性能和代码安全性

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