如何在HTML中实现游戏进度保存及加载功能？

点击类游戏的进度大多为轻量数值数据，纯前端即可实现稳定的本地存档功能，优先使用浏览器原生的localStorage持久化存储方案，无需后端支持，存储上限约5MB完全满足小游戏需求，只要用户不清空浏览器缓存，存档就不会丢失。

实现步骤 #

1. 约定要存储的进度字段 #

先把需要保存的游戏参数整理为统一的对象结构，常见可保存字段包括：

• 累计点击次数
• 持有金币/资源数量
• 已解锁的道具、关卡列表
• 存档时间戳（用来计算离线收益）

2. 编写保存进度函数 #

// 全局游戏状态变量（根据你的实际业务调整字段）
window.gameStats = {
  clickCount: 0,
  gold: 0,
  unlockedItems: []
}

// 保存进度函数
function saveGameProgress() {
  const gameData = {
    clickCount: window.gameStats.clickCount,
    gold: window.gameStats.gold,
    unlockedItems: window.gameStats.unlockedItems,
    saveTime: Date.now()
  }
  // 转为JSON字符串存入本地存储
  localStorage.setItem('clickGameArchive', JSON.stringify(gameData))
  alert('进度保存成功')
}

3. 编写加载进度函数 #

// 加载进度函数
function loadGameProgress() {
  const savedData = localStorage.getItem('clickGameArchive')
  if (!savedData) {
    alert('未找到有效存档')
    return
  }
  try {
    const gameData = JSON.parse(savedData)
    // 把存档数据赋值给全局游戏变量
    window.gameStats.clickCount = gameData.clickCount
    window.gameStats.gold = gameData.gold
    window.gameStats.unlockedItems = gameData.unlockedItems
    // 此处可补充离线收益计算逻辑：用当前时间减去gameData.saveTime换算收益
    alert('进度加载成功')
    // 调用你项目里的UI刷新方法，更新页面显示的数值
    refreshGameUI()
  } catch (err) {
    alert('存档损坏，加载失败')
  }
}

4. 页面添加手动保存/加载按钮 #

<div class="game-controls">
  <button onclick="saveGameProgress()">保存进度</button>
  <button onclick="loadGameProgress()">读取进度</button>
</div>

5. 可选优化：自动保存 #

避免用户忘记手动点击保存，可新增两种自动保存逻辑：

window.addEventListener('load', () => {
  // 每30秒自动存档一次
  setInterval(saveGameProgress, 30 * 1000)
  // 页面关闭、刷新、切后台前自动存档
  window.addEventListener('beforeunload', saveGameProgress)
})

注意：如果用户手动清理浏览器缓存/隐私数据，本地存档会被清除，需要更高可靠性的话可以搭配用户账号体系，把加密后的存档数据同步到服务端存储。

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