如何实现带缓存的JavaScript数字计数器，刷新页面后保留上次计数

核心使用浏览器内置的localStorage持久化存储能力实现，每次计数器更新时同步存储最新值，页面加载时优先读取已存储的计数作为初始值即可。

完整修改后代码 #

JavaScript代码 #

function animateValue(id) {
  // 定义本地存储的key，避免和其他存储项冲突
  const COUNTER_STORAGE_KEY = 'custom_page_counter'
  const obj = document.getElementById(id);
  // 优先读取本地存储的历史计数值，无存储值时用元素初始值
  const savedCounter = localStorage.getItem(COUNTER_STORAGE_KEY)
  let current = savedCounter ? parseInt(savedCounter) : parseInt(obj.innerHTML);
  // 初始化时更新页面显示的计数
  obj.innerHTML = current

  setInterval(() => {
    current++
    // 同时更新页面展示和本地存储
    obj.innerHTML = current
    localStorage.setItem(COUNTER_STORAGE_KEY, current)
  }, 1000)
}

animateValue('value')

HTML代码（无需修改） #

<h1>
  <div id="value">1</div>
</h1>

说明 #

• 该方案仅在同一浏览器的同一域名下生效，清理浏览器本地缓存会重置存储的计数值
• 如果需要实现跨设备、跨浏览器的计数同步，需要对接后端服务存储计数数据

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