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

admin管理员组

文章数量:1418717

I am developing a game in HTML5 for my project, my problem is in the scoring system.
I want to display the top ten best scorers (already sorted). I am currently working with Array in a JSON.

Now I want to save JSON Array in 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;
};

I am developing a game in HTML5 for my project, my problem is in the scoring system.
I want to display the top ten best scorers (already sorted). I am currently working with Array in a JSON.

Now I want to save JSON Array in 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;
};

• javascript
• arrays
• json
• html

Share Improve this question Follow edited Jun 12, 2017 at 22:15 OneCricketeer 192k2020 gold badges142142 silver badges268268 bronze badges asked Oct 5, 2015 at 12:19 Darbs LingoDarbs Lingo 3311 silver badge44 bronze badges 13

• there's no code there regarding local storage. – Jaromanda X Commented Oct 5, 2015 at 12:23
• I dunno where should i start with the localStorage. That's why i'm looking for some help. :) – Darbs Lingo Commented Oct 5, 2015 at 12:24
• so the code snippet is totally irrelevant, just checking – Jaromanda X Commented Oct 5, 2015 at 12:25
• read the answer would be my first piece of advice – Jaromanda X Commented Oct 5, 2015 at 12:27
• Why you want to use localstorage ? – Rayon Commented Oct 5, 2015 at 12:27

 |  Show 8 more ments

4 Answers 4

Sorted by: Reset to default 2

Basically you should use localstorage just like you are doing with storage above. You can use localstorage in the object way as is doing @Magus or in the associative-array way, calling its primitives getItem, setItem.

Simple usage:

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

Then get data from localStorage calling:

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

Advanced usage:

For correct usage (coupled with the current user session) and initialization of localstorage/sessionstorage (according to your goal) see the ment of @War10ck following this issue Push JSON Objects to array in localStorage.

The localStorage can't contains object or array. But you can convert it in a string.

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

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

Getting an item from localStorage:

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

Saving an item in localStorage:

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

---

Note: You can only save strings to the localStorage, so, you will need to convert your data to string via JSON.stringify and then use JSON.parse when retrieving the strings from localStorage.

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

本文标签： How to store JSON with array in a localStorage (Javascript)Stack Overflow