Javascript 迭代本地存储 JSON 对象 (Vanilla Javascript)

Question

所以我想迭代存储在浏览器本地存储中的 JSON 对象。 基本上 JSON 对象的外观和添加方式如下:

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");
}

然后我想迭代该对象并检查“score”键并将这些值与潜在的新条目进行比较。

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

但是，当我这样做时，我在日志中收到 135 undefined 。即使我打印了 JSON 对象，它也按应有的样子显示

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

我在这里做错了什么？

编辑: 建议重复使用 jQuery 来解决问题。我不想使用 jQuery，而是使用标题中描述的普通 javascript。

Answer 1

一旦解决了 Dimava 的问题发现并 pointed out in a comment

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

(更多内容见下文。)

...那么从本质上讲，这与本地存储或 JSON 无关。您想要循环访问对象数组并访问数组中对象的属性。

您的代码的问题在于

1. 您使用的是for-in，它不是用于循环数组；而是用于循环数组。 my answer here有循环数组方法的完整概要

2. 您正在覆盖key的值

3. 您正在尝试让 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));

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