HTML5 LocalStorage与我的变量搞砸

Question

我是新来的HTML和Javascript，并了解它我正在做一个增量游戏（类似于CookieClicker或CivClicker）。

我试图保存和加载进度，我可以保存它只是很好，但是当我加载它，它会正确加载所有的变量，但是当我点击一个按钮增加一个变量，它会做一些奇怪的东西，这很难解释，我会发布代码，所以你可以再看看它。

JSFiddle Here

function loadProgress() { 
    if (typeof (Storage) !== "undefined") { 
     progress = localStorage.progress; 
     speed = localStorage.speed; 
     quality = localStorage.quality; 
     isDone = localStorage.isDone; 
     totalMoney = localStorage.totalMoney; 
     speedCost = localStorage.speedCost; 
     gamesSold = localStorage.gamesSold; 
     autoclick = localStorage.autoclick; 
     autoclickCost = localStorage.autoclickCost; 
     currentBugs = localStorage.currentBugs; 
     refreshDisplay(); 
    } else { 
     console.log("LocalStore not appliable.") 
    } 
} 

按 '设计'，直到你到达100％，然后点击 '卖你的游戏'。然后只需点击保存进度然后点击进度并点击设计并再次出售游戏，您会看到数字增加得非常奇怪，而且根本没有预料到。

'ShowMeTheMoney'将向您显示控制台中的变量，以便您可以验证变量是否已正确存储。

我不知道为什么会发生这种情况，所以如果有人能帮上忙，那就太棒了。

Answer 1

本地存储又名Web存储，将值存储为字符串，因此当您检索值时需要将/ cast转换为数字，否则这些变量将保持为字符串，您将看到串联，而不是将值递增。例如1 + 1变成11而不是2。

Updated working fiddle

有转化为数字的多种方式，一种方式是+方法：

progress = +localStorage.progress; 
speed = +localStorage.speed;  
quality = +localStorage.quality;