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）

回答

相關問題