如何将带有数组的 JSON 存储在 localStorage（Javascript）中？答案

【问题标题】：How to store JSON with array in a localStorage (Javascript)?如何将带有数组的 JSON 存储在 localStorage（Javascript）中？
【发布时间】：2016-01-02 02:26:24
【问题描述】：

我正在为我的项目开发一个 HTML5 游戏，我的问题在于评分系统。
我想显示前十名最好的得分手（已经排序）。我目前正在使用 JSON 中的 Array。

现在我想在 localStorage 中保存 JSON 数组

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

【问题讨论】：

那里没有关于本地存储的代码。
我不知道应该从哪里开始使用 localStorage。这就是为什么我正在寻求帮助。 :)
所以代码 sn-p 是完全无关的，只是检查
阅读答案将是我的第一条建议
为什么要使用 localstorage ？

标签： javascript arrays json html

【解决方案1】：

// 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 '{}'

【讨论】：

这与最佳答案几乎相同，除了|| '{}'。为了改善您的答案，最好解释一下使用您的方式与现有 6 年旧答案相比的区别/好处......请edit您的答案与该信息
非常感谢您的反馈。我已经更新了我的答案，请告诉我解释是否正确。

【解决方案2】：

基本上你应该像上面的storage 一样使用localstorage。您可以像 @Magus 那样以对象方式使用 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'));

高级用法：

有关正确使用（与当前用户会话相结合）和本地存储/会话存储的初始化（根据您的目标），请参阅此问题 Push JSON Objects to array in localStorage 之后的 @War10ck 的评论。

【讨论】：

如果我刷新页面，数据会保留吗？
对于此类问题，请参阅@Buzinas Mozilla documentation 引用的文档。无论如何，即使您关闭窗口并稍后重新打开，localStorage 也会保留数据。 sessionStorage 仅将数据保存在同一会话中（即浏览器的同一选项卡）。

【解决方案3】：

从localStorage获取项目：

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

在localStorage中保存一个项目：

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

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

【讨论】：

解析后，我可以像这样再次访问该对象吗？ obj.Players[i].score
@DarbsLingo 是的，你可以:)

【解决方案4】：

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

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

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

【讨论】：

是的，但是我怎样才能再次访问它以便我可以对其进行排序并在我的项目中显示它？
使用Read the object这一行
解析完对象后，还能再像这样访问数组吗？ obj.Players[0].score
好的，我试试。如果它有效，我会发表评论。谢谢（Y）
@Magus 虽然它会起作用，但如果他刷新页面就不会起作用，因为这不是使用 localStorage 的正确方法。如果您像这样将项目设置为 localStorage，那么您只是在其中创建一个属性，就像您可以执行 window.myObject = 或 document.myObject = 等一样。