Javascript遍历本地存储JSON对象（香草Javascript）

所以我想遍历存储在浏览器的本地存储中的JSON对象。基本上JSON对象的外观，并添加这样的：Javascript遍历本地存储JSON对象（香草Javascript）

if (localStorage.getItem("playerHighscoreObject") == undefined) { 
playerHighscoreList = [ 
    {'name': "Ben", 'score': 40}, 
    {'name': "Joe", 'score': 44}, 
    {'name': "Anna", 'score': 51}, 
    {'name': "Mitch", 'score': 59}, 
    {'name': "Abdi", 'score': 63} 
]; 
localStorage.setItem("playerHighscoreObject", JSON.stringify(playerHighscoreList)); 
} 
else { 
playerHighscoreList = localStorage.getItem("playerHighscoreObject"); 
}

我再要遍历对象和检查的“分数”键和值与一个潜在的新条目。

function saveScore() { 
    var key = "score"; 
    console.log(playerHighscoreList); 
    for (key in playerHighscoreList) { 
    if (playerHighscoreList.hasOwnProperty(key)) { 
     var val = playerHighscoreList[key]; 
     console.log(val); 
    } 
    } 
}

但是，当我这样做时，我得到135日志中未定义。即使我打印的JSON对象，它显示为它应该是

[{"name":"Ben","score":40},{"name":"Joe","score":44},{"name":"Anna","score":51},{"name":"Mitch","score":59},{"name":"Abdi","score":63}]

我在做什么错在这里？

编辑：建议重复使用jQuery来解决问题。我不希望使用jQuery，而是在标题中描述的香草JavaScript。

来源

2016-09-29 Danny

Dupe？ http://stackoverflow.com/questions/3138564/looping-through-localstorage-in-html5-and-javascript – httpNick

是否有'JSON.parse'？ – Dimava

@Dimava：哦，我完全错过了。 'stringify'在那里，但'parse'丢失。 –

一旦你修复Dimava发现问题和pointed out in a comment

else { 
    playerHighscoreList = JSON.parse(localStorage.getItem("playerHighscoreObject")); 
    //     ^^^^^^^^^^---- this was missing 
}

（更多关于该下文）。

...然后在它的核心，这无关与本地存储或JSON。您想循环访问数组中的对象并访问数组中对象的属性。

与您的代码的问题是，

您使用for-in，这是不通过数组循环; my answer here具有通过阵列
你覆盖的key
值你正在努力使key做双责

相反，利用循环方式完全破败任何通过阵列循环的正常方法，例如forEach：

function saveScore() { 
    var key = "score"; 
    playerHighscoreList.forEach(function(entry) { 
    if (entry.hasOwnProperty(key)) { 
     var val = entry[key]; 
     console.log(val); 
    } 
    }); 
}

关于您从本地存储对象的检索，你就可以说简单一点：

playerHighscoreList = JSON.parse(localStorage.getItem("playerHighscoreObject") || "null") || [ 
    {'name': "Ben", 'score': 40}, 
    {'name': "Joe", 'score': 44}, 
    {'name': "Anna", 'score': 51}, 
    {'name': "Mitch", 'score': 59}, 
    {'name': "Abdi", 'score': 63} 
];

一旦你更新它，将它保存（没有特别的原因更新前保存它，因为您的原始代码确实如此）：

localStorage.setItem("playerHighscoreObject", JSON.stringify(playerHighscoreList));

您也可以考虑使本地存储名称和变量名称匹配。

来源

2016-09-29 17:15:16

非常感谢！ – Danny

Javascript遍历本地存储JSON对象（香草Javascript）

回答

相关问题