Overwriting localStorage with JSON

Question

This is a follow-up question to this

I started using the localStorage function, and am unsure whether or not its working as intended.

I want to overwrite a boolean in my JSON file.

Player hits an exit in a stage, then it triggers the load of the next stage, but I also want it to save the fact that the stage was completed.

Here is my JSON array, defining that all dungeons are incomplete by default:

var dungeon_prog = {
"dungeon0_prog" : {
    "complete" : true
},
"dungeon1_prog" : {
    "complete" : false
},
"dungeon2_prog" : {
    "complete" : false
}
};

Then I set it to local storage:

localStorage.setItem('dungeon_prog', JSON.stringify(dungeon_prog));
var dungeon_prog_obj = JSON.parse(localStorage.dungeon_prog);

I want it to override dungeon1_prog "complete" false to true when player hits the exit in dungeon 1.

How would I do this? And are the default "false" statements actually being saved in localStorage? Thanks.

Can't you just change the value in the parsed JSON and restringify? — Manishearth, Dec 16 '13 at 09:54
`dungeon_prog_obj.dungeon1_prog.complete = true` and them do the `setItem()` again: `localStorage.setItem('dungeon_prog', JSON.stringify(dungeon_prog_obj));` — Raul Rene, Dec 16 '13 at 09:55
@Manishearth thanks for commenting. Im not sure what that is. — Naoto Ida, Dec 16 '13 at 09:58
@RaulRene Thanks. I just tried it out, and is close to what I want. It seems to display "true" after I complete dungeon1, but after reloading, it reverts back to "false". I want it to stay "true", unless I hit a new game button or something. — Naoto Ida, Dec 16 '13 at 10:00
@NaotoIda You are probably saving on pageload your initial JSON. On load try to retrieve it from localStorage using `localStorage.getItem('dungeon_prog')` and if it returns `null` then it means you must save it — Raul Rene, Dec 16 '13 at 10:02
@RaulRene Sorry, can you show that in code? I am still a noobie at JSON. — Naoto Ida, Dec 16 '13 at 10:18
By the way, I suggest you use an abstraction for working with the localStorage. Something like this: https://github.com/orangecoding/jsutils/blob/master/storage.js — Christian, Dec 16 '13 at 10:23

Raul Rene · Accepted Answer · 2013-12-16T10:25:17.123

2

The dungeon_prog_obj now holds your JSON object. To answer your last question, yes - localStorage saves the entire JSON string, thus it also saves the boolean values.

To overwrite it you just have to set the boolean value and them save again to the same localStorage item:

dungeon_prog_obj.dungeon1_prog.complete = true;
localStorage.setItem('dungeon_prog', JSON.stringify(dungeon_prog_obj));

Edit:

Update in order to answer questions in the comment, per request.

I am not 100% sure that this is the issue, but you are saying that on page refresh the true value does not persist. The only plausible explanation is that on every page load you are overwriting the JSON with the initial one using localStorage.setItem('dungeon_prog', JSON.stringify(dungeon_prog));, where dungeon_prog is the initial JSON specified in your question.

Instead of doing this, you should check on load if you have the item in localStorage. You can do this in the following way:

// Check for object in localStorage
var dungeon_prog = JSON.parse(localStorage.dungeon_prog);

// If it does not exist, initialize it and save it
if (dungeon_prog != null) {
    dungeonProg = {
        "dungeon0_prog" : {
            "complete" : true
    },
    "dungeon1_prog" : {
        "complete" : false
    },
    "dungeon2_prog" : {
        "complete" : false
   }
   };

   localStorage.setItem('dungeon_prog', JSON.stringify(dungeon_prog));
}

edited Dec 16 '13 at 10:25

answered Dec 16 '13 at 09:57

Raul Rene

10,014
9
53
75

Thanks! I tried it, but this function under your code maybe causing problems: `$("#dungeon_prog_btn").click(function() { console.log("Is Dungeon 0(Debug stage) complete?: " + dungeon_prog_obj.dungeon0_prog.complete); console.log("Is Dungeon 1 complete?: " + dungeon_prog_obj.dungeon1_prog.complete); console.log("Is Dungeon 2 complete?: " + dungeon_prog_obj.dungeon2_prog.complete); });` It's giving me a "dungeon_prog_obj is not defined" error. Is this because dungeon_prog is null? – Naoto Ida Dec 16 '13 at 10:31
1

@NaotoIda If it's null of course you will get `undefined`. I am not understanding what is not working for you. Think like this: the `localStorage` is a DB. On load, you check your DB for the *dungeon_prog* item. If it's there, you store it in a variable and use it. If not, you initialize it using the code you posted in the question, save it to the `localStorage` and then use it. In this way, on next load, you will have it in the `localStorage`. – Raul Rene Dec 16 '13 at 12:21
1

Thank you so much, now its working as intended. Even though this is not much to show my appreciation, I hope I can have you play the game a little early before release, if you are interested. – Naoto Ida Dec 17 '13 at 04:20
@NaotoIda Sure, why not. Glad it worked out for you! – Raul Rene Dec 17 '13 at 08:21

Overwriting localStorage with JSON

1 Answers1