如何为MinerTest网页游戏实现基于Cookies的进度保存？

一、Cookies存储的核心逻辑 #

Cookies是浏览器内置的本地存储方案，和localStorage的核心差异及适配场景：

• 单条Cookie容量限制在4KB左右，适合存储coins、machines这类游戏核心状态的小体量数据
• 可自定义过期时间，默认关闭浏览器后失效，但我们可以手动设置30天甚至更久，确保用户下次打开页面数据不丢失
• 结构化数据（比如数组、对象）需要先转成JSON字符串才能存储，读取时再解析回原格式

二、可直接复用的代码实现（适配Glitch环境） #

Glitch的静态页面环境完全支持原生JS操作Cookie，无需额外配置，直接将以下代码整合到你的游戏脚本中即可：

1. 核心工具函数 #

// 将游戏数据写入Cookie
function saveGameDataToCookie(data) {
  const jsonStr = JSON.stringify(data);
  // 设置30天有效期，可根据需求调整时长
  const expiryDate = new Date();
  expiryDate.setTime(expiryDate.getTime() + 30 * 24 * 60 * 60 * 1000);
  // 编码避免特殊字符冲突，设置根路径确保全站可读取
  document.cookie = `minerTestData=${encodeURIComponent(jsonStr)}; expires=${expiryDate.toUTCString()}; path=/; SameSite=Lax`;
}

// 从Cookie读取游戏数据，无数据或解析失败时返回初始状态
function loadGameDataFromCookie() {
  const targetCookieName = "minerTestData=";
  const decodedCookies = decodeURIComponent(document.cookie).split(';');
  
  for (let cookie of decodedCookies) {
    cookie = cookie.trim();
    if (cookie.startsWith(targetCookieName)) {
      try {
        return JSON.parse(cookie.slice(targetCookieName.length));
      } catch (err) {
        return getDefaultGameData();
      }
    }
  }
  return getDefaultGameData();
}

// 游戏初始状态模板，根据你的游戏结构调整字段
function getDefaultGameData() {
  return {
    coins: 0,
    machines: [],
    drills: []
  };
}

2. 绑定页面事件实现自动存读 #

// 页面加载时自动读取数据初始化游戏
window.addEventListener('load', () => {
  const savedData = loadGameDataFromCookie();
  // 替换为你实际的游戏初始化函数
  initGame(savedData);
});

// 页面关闭/刷新前自动保存当前游戏状态
window.addEventListener('beforeunload', () => {
  // 替换为你获取当前游戏状态的逻辑（比如从全局状态变量中读取）
  const currentGameData = {
    coins: gameState.coins,
    machines: gameState.machines,
    drills: gameState.drills
  };
  saveGameDataToCookie(currentGameData);
});

// 示例：游戏初始化函数（需根据实际逻辑修改）
function initGame(data) {
  gameState = { ...data };
  // 这里编写更新UI、初始化机器/钻头实例的代码
}

三、Glitch环境下的注意事项 #

• 测试时可通过浏览器开发者工具（F12）的「Application → Cookies」面板，查看数据是否正确存储
• 若machines、drills数据量较大，建议精简存储内容（比如只存等级、数量等核心字段，剔除UI相关冗余数据），避免超过4KB的Cookie容量限制
• SameSite=Lax是现代浏览器的安全规范要求，缺失可能导致Cookie存储失败

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