vars 在 localStorage.getItem('key') 之后没有保持正确的值
Posted
技术标签:
【中文标题】vars 在 localStorage.getItem(\'key\') 之后没有保持正确的值【英文标题】：vars not holding proper value after localStorage.getItem('key')vars 在 localStorage.getItem('key') 之后没有保持正确的值 【发布时间】：2019-08-11 20:53:44 【问题描述】：在我尝试保存数据、退出、然后重新打开并加载保存的数据之前，我的代码都可以正常工作。我使用 localStorage.setItem('key', value) 保存，然后使用 localStorage.getItem('key') 加载，但加载后我的 var 没有保存正确的值。 localStorage.getItem('key') 是否返回一个字符串，因为 1 +1 = 2，而不是像它显示的 11。请帮忙。
该页面本身存储在我的电脑上而不是在线，我正在使用谷歌浏览器打开它。我运行 Windows Edge。当我尝试用 Internet Explorer 打开它时，忘记 localStorage.set/getItem 了。我试过用变量运行我的代码，然后尝试保存和加载。 （注意：我所有的代码都可以完美运行，直到我尝试保存变量，然后重新加载它们）。我正在开发一个视频游戏，所以我需要能够保存我的变量。而且由于我不确定代码中的问题出在哪里，很抱歉，除了发布大约 180 行代码之外，我没有其他选择
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="black" >
<font color="white" >
<progress id="myProgress" value="10" max="10"></progress><br>
<p id='demo5' ;></p>
<button id="enemy" type="button" onclick="dealDamage(), imageSwap()"><img
id="enemy1" src="Game_Images/smiley_1.png"></button>
<button id="spriteTest" type="button" onclick="imageSwap2()"><img
id="enemy2" src="Game_Images/smiley_1.png"></button><br>
<button id="upgrade" type="button" onclick="upgradeClickDamage()">
</button>
<button type="button" onclick="moreGold()">More Gold</button><br>
<button type="button" onclick="saveGame()">Save Game</button>
<button type="button" onclick="loadGame()">Load Game</button>
<p id='demo' ;></p>
<p id='demo2' ;></p>
<p id='demo3' ;></p>
<p id='demo4' ;></p>
<script>
var clickDamage = 1;
var gold = 0;
var stage = 1;
var enemyNum = 1;
var enemiesTotal = 10;
var enemiesKilled = 0;
var cost = 100;
var enemyHPTotal = 10;
var enemyHPCurrent = 10;
document.getElementById("upgrade").innerHTML = "Upgrade click damage for:"
+ cost + " gold.";
document.getElementById("demo").innerHTML = "Gold: " + gold;
document.getElementById("demo2").innerHTML = "Stage: " + stage;
document.getElementById("demo3").innerHTML = "Enemies Killed This Stage:"
+ enemiesKilled + "/" + enemiesTotal;
document.getElementById("demo4").innerHTML = "Click Damage:" +
clickDamage;
document.getElementById("demo5").innerHTML = "Enemy HP remaining:" +
enemyHPCurrent + "/" + enemyHPTotal;
function imageSwap()
var image = document.getElementById("enemy1");
if (image.src.match("Game_Images/smiley_1"))
image.src="Game_Images/smiley_2.png"
else if (image.src.match("Game_Images/smiley_2"))
image.src="Game_Images/smiley_3.png"
else
image.src="Game_Images/smiley_1.png"
function imageSwap2()
var image2 = document.getElementById("enemy2");
if(image2.src.match("Game_Images/smiley_1"))
setTimeout(image2.src="Game_Images/smiley_2.png", 300);
else if(image2.src.match("Game_Images/smiley_2"))
setTimeout(image2.src="Game_Images/smiley_3.png", 300);
else
setTimeout(image2.src="Game_Images/smiley_1.png", 300);
function dealDamage()
document.getElementById("myProgress").value -= clickDamage;
//If enemy is hit but does not die
if(document.getElementById("myProgress").value >= 1)
enemyHPCurrent = document.getElementById("myProgress").value
enemyHPTotal = document.getElementById("myProgress").max
document.getElementById("demo5").innerHTML = "Enemy HP remaining:"
+ enemyHPCurrent + "/" + enemyHPTotal;
//If enemy is killed and there are remaining enemies in the current stage
if (document.getElementById("myProgress").value == 0 && enemyNum < 10)
document.getElementById("myProgress").value =
document.getElementById("myProgress").max;
gold += (1 * stage);
enemyHPTotal = document.getElementById("myProgress").value;
enemyNum += 1;
document.getElementById("demo").innerHTML = "Gold: " + gold;
document.getElementById("demo2").innerHTML = "Stage: " + stage;
enemiesKilled += 1;
document.getElementById("demo3").innerHTML = "Enemies Killed This
Stage:" + enemiesKilled + "/" + enemiesTotal;
document.getElementById("demo4").innerHTML = "Click Damage:" +
clickDamage;
enemyHPCurrent = enemyHPTotal;
document.getElementById("demo5").innerHTML = "Enemy HP remaining:"
+ enemyHPCurrent + "/" + enemyHPTotal;
//If the enemy is killed and it is the last enemy of the current stage
if (document.getElementById("myProgress").value == 0 && enemyNum == 10)
document.getElementById("myProgress").max += 1;
document.getElementById("myProgress").value =
document.getElementById("myProgress").max;
gold += (1 * stage);
enemyNum = 1;
stage += 1;
document.getElementById("demo").innerHTML = "Gold: " + gold;
document.getElementById("demo2").innerHTML = "Stage: " + stage;
enemiesKilled = 0;
document.getElementById("demo3").innerHTML = "Enemies Killed This
Stage:" + enemiesKilled + "/" + enemiesTotal;
document.getElementById("demo4").innerHTML = "Click Damage:" +
clickDamage;
enemyHPTotal = document.getElementById("myProgress").max;
enemyHPCurrent = enemyHPTotal;
document.getElementById("demo5").innerHTML = "Enemy HP remaining:"
+ enemyHPCurrent + "/" + enemyHPTotal;
function upgradeClickDamage()
if (gold >= cost)
gold -= cost;
clickDamage += 1;
cost += 100;
document.getElementById("messageBox").innerHTML =
"Congratulations!!! You just upgraded your click damage."
document.getElementById("upgrade").innerHTML = "Upgrade click damage
for:" + cost + " gold.";
document.getElementById("demo").innerHTML = "Gold: " + gold;
document.getElementById("demo4").innerHTML = "Click Damage:" +
clickDamage;
else if (gold < cost)
document.getElementById("messageBox").innerHTML = "You don't have
enough gold for this upgrade."
function moreGold()
gold += 100;
document.getElementById("demo").innerHTML = "Gold: " + gold;
function saveGame()
//save all vars
localStorage.setItem('CLICKDAMAGE', clickDamage);
localStorage.setItem('GOLD', gold);
localStorage.setItem('STAGE', stage);
localStorage.setItem('ENEMYNUM', enemyNum);
localStorage.setItem('ENEMIESTOTAL', enemiesTotal);
localStorage.setItem('ENEMIESKILLED', enemiesKilled);
localStorage.setItem('COST', cost);
localStorage.setItem('ENEMYHPTOTAL', enemyHPTotal);
localStorage.setItem('ENEMYHPCURRENT', enemyHPCurrent);
function loadGame()
//load all vars
clickDamage = localStorage.getItem('CLICKDAMAGE');
gold = localStorage.getItem('GOLD');
stage = localStorage.getItem('STAGE');
enemyNum = localStorage.getItem('ENEMYNUM');
enemiesTotal = localStorage.getItem('ENEMIESTOTAL');
enemiesKilled = localStorage.getItem('ENEMIESKILLED');
cost = localStorage.getItem('COST');
enemyHPTotal = localStorage.getItem('ENEMYHPTOTAL');
enemyHPCurrent = localStorage.getItem('ENEMYHPCURRENT');
</script>
<div id="messageBox"></div>
</font>
</body>
</html>
我希望所有变量在加载后都能正常运行。 金币、成本和被击杀的敌人都受到这个问题的影响。如果gold = 1，然后我保存该变量，然后稍后加载该变量，然后再次添加1，我得到11，而不是2。使用成本，如果成本= 100，那么我保存，然后我稍后加载，然后我添加100成本，成本 = 100100 而不是 200。
【问题讨论】：
【参考方案1】：（为了完整起见，这将重申您在问题中的一些假设）
如果您查看Storage.getItem() 的文档，它会说：
返回值 包含键值的
DOMString。如果key不存在，则返回null。
这意味着无论您在setItem 中提供什么数据类型，getItem 的输出都将始终是字符串。这很容易在控制台中测试：
localStorage.setItem("test", 1);
> undefined
localStorage.getItem("test");
> "1"
当您将字符串添加到数字时，它只是将两者连接在一起。在您的情况下，您添加的是 "1" + 1，它变成了 "11"，而不是添加了 1 + 1，它是 2。解决方案是将数字字符串转换为数字，这可以通过多种方式完成，但最容易做到（在我看来）只需在表达式前面加上 +。
+localStorage.getItem("test");
> 1
【讨论】：
我不需要立即添加 var。我需要它立即成为保存的号码，然后再添加。还有什么方法可以将其转换为数字？ 我使用+的方式是作为前缀运算符。它不会添加任何内容，但会将字符串强制转换为数字。不过，要回答您的问题，parseInt(x)、parseFloat(x)、Number(x) 和 new Number(x) 也会将字符串转换为数字。【参考方案2】：
localStorage.setItem 将所有传递的值转换为字符串。一旦你调用localStorage.getItem，你就会得到字符串值。
所以你试图连接字符串和数字"1" + 1 === "11"。
为防止这种行为，您需要手动将值转换为字符串化 JSON：
localStorage.setItem('CLICKDAMAGE', JSON.stringify(clickDamage));
然后解析回来：
clickDamage = JSON.parse(localStorage.getItem('CLICKDAMAGE'));
【讨论】：
我用过 - clickDamage = Number(localStorage.getItem('CLICKDAMAGE'));我还不确定 JSON.parse 是做什么的，我只知道 html 和一点 javascript @JohnThompson, JSON.parse 是一个标准的 JS 方法，它接受一个字符串并将其格式化为 JS 值（数字、布尔值、...）或对象。对于您当前的情况，Number(...); 可以正常工作，但JSON.parse 是更通用的解决方案。以上是关于vars 在 localStorage.getItem('key') 之后没有保持正确的值的主要内容，如果未能解决你的问题，请参考以下文章
在 PHP 中，差异是啥： $var2=$var1 ; $var2=&$var1; [复制]