堆栈内存溢出
  简体   繁体   English

在localStorage.getItem（'key'）之后，var无法保持适当的值

[英]vars not holding proper value after localStorage.getItem('key')

 原文  2019-08-11 20:53:44  7   2    javascript/ variables

问题描述

My code works fine up until I try to save my data, exit out, then reopen then load saved data. 我的代码可以正常工作，直到尝试保存我的数据，退出，然后重新打开然后加载保存的数据。 I save using localStorage.setItem('key', value) then I load using localStorage.getItem('key'), but after I load my vars are not holding the right values. 我使用localStorage.setItem（'key'，value）保存，然后使用localStorage.getItem（'key'）进行加载，但是加载后，我的var没有保存正确的值。 Is localStorage.getItem('key') returning a string, because 1 +1 = 2, not 11 like it's displaying. 是localStorage.getItem（'key'）返回一个字符串，因为1 +1 = 2，而不是显示的11。 please help. 请帮忙。

The page itself is stored on my PC not online, I'm opening it up with Google Chrome. 该页面本身存储在我的PC上，而不在线存储，我正在使用Google Chrome浏览器打开它。 I run Windows Edge. 我运行Windows Edge。 When I try opening this with Internet Explorer, forget about localStorage.set/getItem all together. 当我尝试使用Internet Explorer打开此文件时，完全忘记了localStorage.set / getItem。 I've tried just running my code with the variables then try to save and load. 我试过只使用变量运行代码，然后尝试保存和加载。 (note:All my code works flawlessly until I try to save the variables, then reload them). （注意：在尝试保存变量，然后重新加载它们之前，我的所有代码都可以正常工作）。 I'm working on a video game so I need to be able to save my variables. 我正在制作视频游戏，所以我需要能够保存变量。 And since I'm not sure where the problem in my code lies, I'm sorry but I see no other option than to post about 180 lines of code 而且，由于我不确定代码中的问题在哪里，很抱歉，但是除了发布大约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>

I expected all variables to function properly after loading. 我希望所有变量在加载后都能正常运行。 gold, cost, and enemiesKilled are all affected by this same problem. 黄金，成本和敌人杀戮都受此问题影响。 If gold = 1, and I save that variable then load that variable later, then add 1 again, I get 11, not 2. With cost, if cost = 100, then I save, then I load later, then I add 100 to cost, cost = 100100 not 200. 如果gold = 1，然后保存该变量，然后再加载该变量，然后再次加1，则得到11，而不是2。对于cost，如果cost = 100，则保存，然后再加载，然后将100加到费用，费用= 100100而不是200。

2 个解决方案

解决方案1
 0 已采纳  2019-08-11 21:02:36

(This will restate a bit of what you hypothesized in your question for the sake of completeness) （为了完整起见，这将重述您在问题中假设的内容）

If you look at the documentation for Storage.getItem() , it says: 如果查看Storage.getItem()的文档，它将显示：

Return value 返回值
A DOMString containing the value of the key. 包含键值的DOMString 。 If the key does not exist, null is returned. 如果键不存在，则返回null。

This means that no matter what data type you give in setItem , the output of getItem will always be a string. 这意味着无论您在setItem提供哪种数据类型， getItem的输出将始终是字符串。 This is easy to test in the console: 这很容易在控制台中测试： 

localStorage.setItem("test", 1);
> undefined
localStorage.getItem("test");
> "1"

When you add a string to a number, it just concatenates the two together. 将字符串添加到数字时，它只是将两者串联在一起。 In your case, you're adding "1" + 1 which becomes "11" instead of adding 1 + 1 which would be 2 . 在您的情况下，您要添加"1" + 1变为"11"而不是添加1 + 1等于2 。 The solution is to convert the number string into a number, which can be done several ways, but is easiest to do (in my opinion) by simply prefixing the expression with a + . 解决方案是将数字字符串转换为数字，这可以通过几种方法完成，但最简单的方法是（在我看来），只需在表达式前面加上+ 。 

+localStorage.getItem("test");
> 1

解决方案2
 0  2019-08-11 21:10:10

The localStorage.setItem converts all passed values to string. localStorage.setItem将所有传递的值转换为字符串。 Once you call localStorage.getItem you are getting back string value. 调用localStorage.getItem您将返回字符串值。

So you are trying to concatenate string and number "1" + 1 === "11" . 因此，您尝试将字符串和数字"1" + 1 === "11" 。

To prevent this behavior you need to manually convert values to stringified JSON: 为防止此行为，您需要手动将值转换为字符串化的JSON： 

localStorage.setItem('CLICKDAMAGE', JSON.stringify(clickDamage));

And then parse it back: 然后解析回去： 

clickDamage = JSON.parse(localStorage.getItem('CLICKDAMAGE'));

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 有什么办法可以避免 localStorage.getItem() 的 key 的未定义值？ - Is there any way to avoid the undefined value of key of localStorage.getItem()? LocalStorage.getItem：检查密钥是否存在 - LocalStorage.getItem: Check if a key exists Javascript：localStorage.getItem（key）不起作用 - Javascript: localStorage.getItem(key) not working 在React中的秒表上设置localstorage.getItem（）值 - Set the localstorage.getItem() value on the stopwatch in React LocalStorage.getItem 值返回 null - LocalStorage.getItem Value returns null 在 LocalStorage.getItem 中将值作为“空”值获取 - getting the values as 'null' value in LocalStorage.getItem 拦截localStorage.getItem（） - Intercept localStorage.getItem() 使用 localStorage.getItem 获取键的第一个元素 - Get first element of a key using localStorage.getItem 即使在清除后，使用 localStorage.getItem 访问值也会返回旧值 - Accessing values with localStorage.getItem is returning old value even after being cleared localstorage.getitem('key') 有时返回 null - 在反应应用程序中 - localstorage.getitem('key') sometimes returns null - in a react app
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM