HTML5 LocalStorage 搞砸了我的变量答案

【问题标题】：HTML5 LocalStorage screwing with my variablesHTML5 LocalStorage 搞砸了我的变量
【发布时间】：2014-06-19 08:52:35
【问题描述】：

我是 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”将在控制台中显示变量，以便您验证变量是否正确存储。

我不知道为什么会这样，所以如果有人可以提供帮助，那就太好了。

【问题讨论】：

标签： javascript html local-storage web-storage

【解决方案1】：

本地存储也称为 Web 存储，将值存储为字符串，因此您需要在检索值时转换/转换为数字，否则变量将保留为字符串，您将看到连接而不是递增的值。例如 1 + 1 变为 11 而不是 2。

Updated working fiddle

转换为数字的方法有很多种，一种是+方法：

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

【讨论】：

你也可以使用progress = Number(localStorage.progress);。