如何在HTML5 Cookie Clicker克隆版中用localStorage实现变量保存与加载？

嘿，别担心！作为刚入门的HTML5开发者，遇到数据保存的问题太正常了，我来给你讲几个简单好上手的方法，完美适配你的Cookie Clicker克隆项目～

我们主要用浏览器自带的localStorage来实现，它操作简单，不需要后端，完全适合你的小游戏需求。

1. 保存数据到本地 #

localStorage只能存储字符串类型的数据，所以分两种情况处理：

简单变量（比如点击次数） #

比如你有个记录饼干数量的变量cookieCount，直接存就行：

let cookieCount = 0;

// 保存数据：第一个参数是存储的"键名"，第二个是要存的变量
localStorage.setItem('cookieCount', cookieCount);

复杂对象（比如升级道具数据） #

如果是像升级道具这样的对象（比如{ cursor: 0, grandma: 0 }），需要先转成JSON字符串再存：

let upgrades = {
  cursor: 0,
  grandma: 0
};

// 用JSON.stringify把对象转成字符串
localStorage.setItem('upgrades', JSON.stringify(upgrades));

2. 页面加载时恢复数据 #

每次打开页面，我们要把之前存的数据读回来，同样分两种情况：

恢复简单变量 #

读取后记得转成数字（因为存进去的是字符串），还要加个默认值防止第一次打开没有数据：

// 页面加载时执行
window.addEventListener('load', () => {
  // 用parseInt转成数字，|| 0表示如果没读到数据就用0当默认值
  cookieCount = parseInt(localStorage.getItem('cookieCount')) || 0;
  
  // 别忘了更新页面显示，比如把数量放到页面元素里
  document.getElementById('cookie-count').textContent = cookieCount;
});

恢复复杂对象 #

用JSON.parse把字符串转回对象，同样加默认值：

window.addEventListener('load', () => {
  // 解析JSON字符串，默认值是初始的升级数据
  upgrades = JSON.parse(localStorage.getItem('upgrades')) || {
    cursor: 0,
    grandma: 0
  };
});

3. 自动保存的小技巧 #

不用做专门的保存按钮，每次操作后自动保存更方便：

// 点击饼干的函数
function clickCookie() {
  cookieCount++;
  document.getElementById('cookie-count').textContent = cookieCount;
  // 每次点击后立刻保存
  localStorage.setItem('cookieCount', cookieCount);
}

// 购买升级的函数
function buyUpgrade(type) {
  // 这里先写判断是否够买的逻辑（比如cookieCount >= 价格）
  upgrades[type]++;
  // 保存升级数据
  localStorage.setItem('upgrades', JSON.stringify(upgrades));
}

小提醒 #

• localStorage的数据存在用户浏览器里，清除浏览器缓存会丢失，但对于Cookie Clicker这类小游戏完全够用
• 它只能存储字符串类型，所以复杂对象一定要用JSON.stringify()转成字符串再存，读取时用JSON.parse()转回对象
• 不要存敏感信息，因为数据是明文保存在本地的

这样应该就能解决你的数据保存问题啦，要是还有不懂的地方，随时问～

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