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

Question

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 dunno where should i start with the localStorage. That's why i'm looking for some help. :) — Darbs Lingo, Oct 05 '15 at 12:24
@RayonDabre So that i can store the best scores even if i close the browser. It is possible right? — Darbs Lingo, Oct 05 '15 at 12:29
@DarbsLingo, But the scoreboard may change as other users will play the game, isn't it ? If you access the score from `localStorage` then it will never update.. — Rayon, Oct 05 '15 at 12:30
@RayonDabre Hmmm . thats my next problem now. Can you please help me ? Please ? :'( — Darbs Lingo, Oct 05 '15 at 12:43
@DarbsLingo, Store the users score in the _database_ and manipulate users scoreboard at server-side.. — Rayon, Oct 05 '15 at 12:45
@RayonDabre Btw, the requirement for my project is offline game. :( — Darbs Lingo, Oct 05 '15 at 12:46
@DarbsLingo - Well explained here... http://stackoverflow.com/questions/16083919/push-json-objects-to-array-in-localstorage — Adesh M, Oct 05 '15 at 13:28

score 2 · Answer 1 · edited May 23 '17 at 10:30

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 comment of @War10ck following this issue Push JSON Objects to array in localStorage.

For such questions please see the documentation cited by @Buzinas [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Anyway, the localStorage keeps data even if you close the window and reopen it later. The sessionStorage keeps data only in the same session (i.e. same tab of the browser), instead. — morels, Oct 05 '15 at 13:18

score 0 · Answer 2 · answered Oct 05 '15 at 12:23

0

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

answered Oct 05 '15 at 12:23

Magus

14,796
3
36
51

Yeah, but how can i access it again so that i can sort it and display it in my project? – Darbs Lingo Oct 05 '15 at 12:28
Use the line `Read the object` – Magus Oct 05 '15 at 12:28
After i parse the object, can i access the array like this again? `obj.Players[0].score` – Darbs Lingo Oct 05 '15 at 12:31
Okay, i'll try it. I will just comment if it works . thanks (Y) – Darbs Lingo Oct 05 '15 at 12:33
@Magus although it will work, it won't work if he refreshes the page, since that's not a correct way to use localStorage. If you set items to the localStorage like this, you're only creating a property into it, as you could do `window.myObject =`, or `document.myObject =` etc. – Buzinas Oct 05 '15 at 12:36
It works like this too. See this response : http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage?rq=1 – Magus Oct 05 '15 at 12:39
@Buzinas That's my next problem. Would you mind helping me? T.I.A (y) – Darbs Lingo Oct 05 '15 at 12:45

score 0 · Answer 3 · answered Oct 05 '15 at 12:31

0

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.

answered Oct 05 '15 at 12:31

Buzinas

11,597
2
36
58

After i parse it, can i access the object again like this ? `obj.Players[i].score` – Darbs Lingo Oct 05 '15 at 12:32
@DarbsLingo yeah, you can :) – Buzinas Oct 05 '15 at 12:33

Akash Starvin Dsouza · Answer 4 · 2021-12-09T14:14:36.143

0

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

edited Dec 09 '21 at 14:14

answered Dec 08 '21 at 15:49

Akash Starvin Dsouza

399
3
8

This is pretty much the same as the top answer, except for that `|| '{}'`. To improve your answer it would better to explain the difference/benefit of using your way compared to the existing 6 years old answer... Please [edit] your answer with that information – Tomerikoo Dec 09 '21 at 09:09
Thank you so much for the feedback. I've updated my answer, just let me know if the explanation is correct or not. – Akash Starvin Dsouza Dec 09 '21 at 14:21

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

4 Answers4

Linked