HTML5 localStorage: Is my code following correct standards?

Question

OK, so I have created an HTML5 canvas game that uses localStorage. I have localStorage working perfectly but I'm not sure that it follows the correct standards, or if it is completely fine the way that I have written it.

//check if storage is set already, if not set the variable   
function checkLocalStorage(){  
if (localStorage.timesPlayed){  
timesPlayed = Number(localStorage.timesPlayed);  
}   
else{   
timesPlayed = 0;   
}   
}

//code snippet to increase my variable   
timesPlayed += 1;

//code snippet to set the localStorage   
localStorage.timesPlayed = timesPlayed;

This works perfectly!? But from what I have read, i should be using localStorage.getItem and localStorage.setItem?

Should I change the way I write localStorage??

This is just the link to the website where I learned this way to access localStorage http://hacks.mozilla.org/2009/06/localstorage/

No, i know that, but from what is already "Out there" on the web, should I be following what others have done? (referring to getItem, setItem) — Jacob, Jun 15 '11 at 00:23
This might be helpful -- good answers about setitem, getitem http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — mrk, Jun 15 '11 at 00:28

score 3 · Accepted Answer · answered Jun 15 '11 at 00:27

It works, and it probably won't break, but I'd still try to cast things in the correct type when using localStorage. getItem and setItem are the preferred ways of doing things, but the thing that jumped out at me was that your methods of getting and setting the value won't work for any type but a number, which means you have to code cautiously if you're using a lot of localStorage.

You're sending a number to localStorage, where it's converted to a string. This can get you into a lot of trouble when dealing with booleans, for example:

var won = false;
localStorage.isWinner = won;
if (localStorage.isWinner) { // always true
  alert("You won!");
}

Arrays and objects get ugly too:

localStorage.test = {foo: "bar", dog: "cat"};
// returns "[object Object]"

In other words, what you have works, but it's a good habit to do things correctly and consistently from the start, as it will simplify debugging later. The correct way -- which works with strings, numbers, arrays, objects -- is this:

localStorage.setItem("key", JSON.stringify(value));
JSON.parse(localStorage.getItem("key"));

// or as a de facto alternative

localStorage.key = JSON.stringify(value);
JSON.parse(localStorage.key);

Thanks for the help! I really am sending a number to localStorage, then retrieving the string and using Number() to convert the string to a number so that I can increase it using timesPlayed += 1 — Jacob, Jun 15 '11 at 13:30
So, I don't have to use Number() and I can still send and retrieve a string with localStorage with the way that I have set it up. But regardless, I will be switching over to getItem and setItem. — Jacob, Jun 15 '11 at 13:37
@Jacob, yeah, the way you have works. I'm not saying otherwise. But the good thing about using the `JSON.parse` and `JSON.stringify` methods are that they will _always_ return the correct type from localStorage no matter what. If you're storing one thing in localStorage this isn't a big deal, but what happens if you come back a month later and want to refactor the code? You have to remember what you've stored as a string, what's a number, what's a boolean. It's best to just nip that problem in the bud. (I say this as someone who had this problem with an extension I made.) — brymck, Jun 15 '11 at 13:42

Cristian Sanchez · Answer 2 · 2011-06-15T00:32:49.090

0

I don't think the array access notation for localStorage is part of the standard, but most browsers that implement will probably allow for that possibility. If you want to be especially careful, then use getItem and setItem - but personally, I don't foresee this being a problem.

Mozilla says:

Although the values can be set and read via the standard JavaScript property access method usage of getItem and setItem methods is recommended.

http://dev.w3.org/html5/webstorage/#storage-0

Even the examples in that draft they use the property access notation, so I think you're OK.

edited Jun 15 '11 at 00:32

answered Jun 15 '11 at 00:26

Cristian Sanchez

31,171
11
57
63

Thanks for your help! I may stick with it, but I'm mostly likely going to change to getItem and setItem. – Jacob Jun 15 '11 at 13:31

score 0 · Answer 3 · answered Jun 15 '11 at 01:35

For a small application, direct reading and writing to localStorage is probaby OK, however I think in a more complex application it would be a good idea to wrap localStorage and provide an API with get and set methods suitable for the particular application (e.g. get/setMySpecialObject and get/setMySpecialValue).

I don't think an application should care about where data is stored, it should just call an API to get or set it. The code behind the API works out how to store it and where to get it from. Genearlly it's most efficient to read and write data into an object and read/write to localStorage behind the scenes. Get data from localStorage the first time it is requested and cache it. If it's updated along the way, write back to localStorage as appropriate, it should not require commands from the application to do so.

HTML5 localStorage: Is my code following correct standards?

3 Answers3