如何在localStorage (Javascript)中使用数组存储JSON

How to store JSON with array in a localStorage (Javascript)?

本文关键字：数组 存储 JSON localStorage Javascript      更新时间：2023-09-26

我正在为自己的项目开发一款HTML5游戏，我的问题在于评分系统。
我想显示前十位最好的分数(已经排序)。我目前正在与JSON数组工作。

现在我要将JSON Array保存到localStorage

var storage = '{"Players":[' +
        '{"score":"0","Name":"Player 2"},' +
        '{"score":"0","Name":"Player 4"},' +
        '{"score":"0","Name":"Player 1"}]}';
var obj = JSON.parse(storage);
obj['Players'].push({"score": 13,"Name": "Player1"});
obj['Players'].push({"score": 523,"Name": "Player2"});
obj['Players'].push({"score": 3,"Name": "Player3"});
obj['Players'].push({"score": 1235,"Name": "Player4"});
storage = JSON.stringify(obj);
var sortColumnScore = "score";
function SortByScore(x,y) {
    return ((x[sortColumnScore]  == y[sortColumnScore]) ? 0 : ((x[sortColumnScore] < y[sortColumnScore]) ? 1 : -1 ));
}
obj.Players.sort(SortByScore);
for (var i = 0; i < 5; i++) {
    document.getElementById("s"+ (i+1)).innerHTML =
    obj.Players[i].score;
    document.getElementById("p"+ (i+1)).innerHTML =
    obj.Players[i].Name;
};

基本上，您应该使用本地存储，就像上面使用storage一样。您可以像使用@Magus一样以对象的方式使用localstorage，或者以关联数组的方式使用localstorage，调用其原语getItem, setItem。

简单用法: 

var storage = '{"Players":[' +
    '{"score":"0","Name":"Player 2"},' +
    '{"score":"0","Name":"Player 4"},' +
    '{"score":"0","Name":"Player 1"}]}';
var obj = JSON.parse(storage);
obj['Players'].push({"score": 13,"Name": "Player1"});
obj['Players'].push({"score": 523,"Name": "Player2"});
obj['Players'].push({"score": 3,"Name": "Player3"});
obj['Players'].push({"score": 1235,"Name": "Player4"});
localStorage.setItem('Players', JSON.stringify(obj));

然后从localStorage调用获取数据:

var myobj = JSON.parse(localStorage.getItem('Players'));

高级用法:

对于正确的使用(加上当前用户会话)和初始化localstorage/sessionstorage(根据您的目标)，请参阅@War10ck在此问题后的评论将JSON对象推送到localstorage中的数组。

localStorage不能包含对象或数组。但是你可以把它转换成字符串。

// Store the object
localStorage.myObject = JSON.stringify(myObject);
// Read the object
var myObject = JSON.parse(localStorage.myObject);

从localStorage获取项:

var str = localStorage.getItem('my-item');

在localStorage中保存项目:

localStorage.setItem('my-item', str);

注意:您只能将字符串保存到localStorage，因此，您需要通过JSON.stringify将数据转换为字符串，然后在从localStorage检索字符串时使用JSON.parse。

// To store object into local storage
localStorage.setItem('any-unique-key', JSON.stringify(arrayName));

// To retrieve from local storage
var resultArray = JSON.parse(localStorage.getItem('any-unique-key') || '{}'); 

// Check if the data associated with that 'any-unique-key' exists or not
// If not then return empty JSON object enclosed with single quotes
return '{}'
相关文章：