如何在JS中用LocalStorage存储并读取Cookie Clicker游戏数据

核心思路 #

利用浏览器的localStorage将游戏数据存储在本地，页面加载时读取已保存的数据，页面关闭/刷新或数据发生变化时自动保存数据，避免刷新或关闭页面后数据重置。

具体实现步骤 #

1. 初始化变量时加载本地保存的数据

把原来的变量初始化逻辑改成优先读取localStorage中的数据，没有保存数据时再使用默认值：

// 先定义所有变量的默认值
let clicks = 0;
let cpc = 1 ;
let autoc = 0;
let cpcCost = 1;
let autocCost = 1000;
let upgradecookiecost = 50000;
let currentcookie = 0;
let cookiemultiplier = 1;

// 读取localStorage里的保存数据
const savedGameData = localStorage.getItem('cookieClickerSave');
if (savedGameData) {
  // 将存储的字符串转为对象
  const parsedData = JSON.parse(savedGameData);
  // 用保存的数据覆盖默认值
  clicks = parsedData.clicks;
  cpc = parsedData.cpc;
  autoc = parsedData.autoc;
  cpcCost = parsedData.cpcCost;
  autocCost = parsedData.autocCost;
  upgradecookiecost = parsedData.upgradecookiecost;
  currentcookie = parsedData.currentcookie;
  cookiemultiplier = parsedData.cookiemultiplier;
}

2. 编写统一的保存数据函数

把所有游戏变量打包成一个对象，转成JSON字符串后存入localStorage：

function saveGame() {
  // 将所有变量整合为一个对象
  const gameData = {
    clicks,
    cpc,
    autoc,
    cpcCost,
    autocCost,
    upgradecookiecost,
    currentcookie,
    cookiemultiplier
  };
  // 转为JSON字符串存入localStorage
  localStorage.setItem('cookieClickerSave', JSON.stringify(gameData));
}

3. 设置触发保存的时机

• 页面关闭/刷新前自动保存：

// 监听页面卸载事件，确保关闭或刷新时保存数据
window.addEventListener('beforeunload', () => {
  saveGame();
});

• 数据变化时立即保存：在每次修改游戏数据的逻辑后调用保存函数，比如点击cookie、购买升级后：

// 点击cookie的示例函数
function clickCookie() {
  currentcookie += cpc * cookiemultiplier;
  clicks++;
  saveGame(); // 点击后立即保存
  // 这里添加更新页面显示的代码，比如修改页面上的cookie数量
}

// 购买自动点击器的示例函数
function buyAutoclicker() {
  if (currentcookie >= autocCost) {
    currentcookie -= autocCost;
    autoc++;
    autocCost = Math.floor(autocCost * 1.15); // 升级后价格上涨
    saveGame(); // 购买后立即保存
    // 这里添加更新页面显示的代码，比如修改自动点击器数量和价格
  }
}

• 定时保存（可选）：防止浏览器崩溃导致数据丢失，设置每30秒自动保存一次：

// 每30秒自动保存一次数据
setInterval(saveGame, 30000);

4. 重置游戏功能（可选）

如果需要重置游戏数据，添加清除本地存储的函数：

function resetGame() {
  // 删除localStorage中的保存数据
  localStorage.removeItem('cookieClickerSave');
  // 重置所有变量为默认值
  clicks = 0;
  cpc = 1;
  autoc = 0;
  cpcCost = 1;
  autocCost = 1000;
  upgradecookiecost = 50000;
  currentcookie = 0;
  cookiemultiplier = 1;
  // 这里添加更新页面显示的代码，恢复初始状态
}

注意事项 #

• localStorage仅支持存储字符串，所以需要用JSON.stringify()将对象转为字符串，读取时用JSON.parse()转回对象。
• 数据存储在当前浏览器的本地，更换浏览器或清除浏览器缓存会导致数据丢失。
• 每个域名的localStorage有5MB左右的存储上限，你的游戏数据完全在这个范围内。

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