Javascript遍历本地存储JSON对象(Vanilla Javascript)

Javascript iterate over local storage JSON object (Vanilla Javascript)

本文关键字：Javascript Vanilla 对象 存储 遍历 JSON      更新时间：2023-09-26

所以我想遍历存储在浏览器本地存储中的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未定义。尽管我打印了JSON对象它显示的是

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

我在这里做错了什么?

编辑:建议副本使用jQuery解决问题。我不希望使用jQuery，而是使用标题中描述的普通javascript。

一旦你修复了Dimava在评论中发现并指出的问题

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

…那么在其核心，这与本地存储或JSON无关。你想循环遍历一个对象数组，并访问数组中对象的属性。

你的代码的问题是

  1. 你正在使用for-in，这不是通过数组循环;我在这里给出了一个完整的遍历数组

    2. 的方法列表。

  2. 您正在覆盖key

    3. 的值

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

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

相关文章：