By Mark Rummel


2012-09-28 01:38:08 8 Comments

I recently asked a question about LocalStorage. Using JSON.parse(localStorage.item) and JSON.parse(localStorage['item']) weren't working to return NULL when the item hadn't been set yet.

However, JSON.parse(localStorage.getItem('item') did work. And it turns out, JSON.parse(localStorage.testObject || null) also works.

One of the comments basically said that localStorage.getItem() and localStorage.setItem() should always be preferred:

The getter and setter provide a consistent, standardised and crossbrowser compatible way to work with the LS api and should always be preferred over the other ways. -Christoph

I've come to like using the shorthand dot and bracket notations for localStorage, but I'm curious to know others' take on this. Is localStorage.getItem('item') better than localStorage.item or localStorage['item'] OR as long as they work are the shorthand notations okay?

4 comments

@Ted Hopp 2013-03-15 17:53:55

Both direct property access (localStorage.item or localStorage['item']) and using the functional interface (localStorage.getItem('item')) work fine. Both are standard and cross-browser compatible.* According to the spec:

The supported property names on a Storage object are the keys of each key/value pair currently present in the list associated with the object, in the order that the keys were last added to the storage area.

They just behave differently when no key/value pair is found with the requested name. For example, if key 'item' does not exist, var a = localStorage.item; will result in a being undefined, while var a = localStorage.getItem('item'); will result in a having the value null. As you have discovered, undefined and null are not interchangeable in JavaScript/EcmaScript. :)

EDIT: As Christoph points out in his answer, the functional interface is the only way to reliably store and retrieve values under keys equal to the predefined properties of localStorage. (There are six of these: length, key, setItem, getItem, removeItem, and clear.) So, for instance, the following will always work:

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

Note in particular that the first statement will not affect the property localStorage.length (except perhaps incrementing it if there was no key 'length' already in localStorage). In this respect, the spec seems to be internally inconsistent.

However, the following will probably not do what you want:

localStorage.length = 2;
console.log(localStorage.length);

Interestingly, the first is a no-op in Chrome, but is synonymous with the functional call in Firefox. The second will always log the number of keys present in localStorage.

* This is true for browsers that support web storage in the first place. (This includes pretty much all modern desktop and mobile browsers.) For environments that simulate local storage using cookies or other techniques, the behavior depends on the shim that is used. Several polyfills for localStorage can be found here.

@Christoph 2014-07-23 07:59:15

The question is already quite old, but since I have been quoted in the question, I think I should say two words about my statement.

The Storage Object is rather special, it's an object, which provides access to a list of key/value pairs. Thus it's not an ordinary object or array.

For example it has the length attribute, which unlike the array length attribute is readonly and returns the number of keys in the storage.

With an array you can do:

var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]

Here we have the first reason to use the getters/setters. What if you want to set an item called length?

localStorage.length = "foo";
localStorage.length  // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length  // => 1
localStorage.getItem("length") // => "foo"

With other members of the Storage object it's even more critical, since they are writable and you can accidently overwrite methods like getItem. Using the API methods prevents any of these possible problems and provides a consistent Interface.

Also interesting point is the following paragraph in the spec (emphasized by me):

The setItem() and removeItem() methods must be atomic with respect to failure. In the case of failure, the method does nothing. That is, changes to the data storage area must either be successful, or the data storage area must not be changed at all.

Theoretically there should be no difference between the getters/setters and the [] access, but you never know...

@Erik Reppen 2014-07-28 23:59:16

On the first point, damn near everything in JavaScript is writable and the localStorage API only has three properties I'm aware of. On the second, using the dot or bracket notation approaches you're still hitting some kind of native setter implementation since the values are auto-converted to strings no matter how you set them so it should have the same safeguards available. I've actually never hear of a persistent value getting corrupted in a client-side browser scenario before. I suspect even vanilla accessors typically have some kind of safeguard.

@Ted Hopp 2015-03-13 02:48:42

The point about name collision is excellent. The length property will not change (at least in Chrome and Firefox[*]) if you call localStorage.setItem("length", something);, but you can retrieve something with localStorage.getItem("length");. Interestingly, assigning localStorage.length = something; in Chrome is a no-op, but in Firefox it will store something under the key "length" (which you can then only retrieve using the functional interface). [*] Actually, in Firefox, the length property will change if the key "length" is not already in localStorage.

@Ted Hopp 2015-03-13 03:05:41

@ErikReppen - According to the spec, localStorage has six predefined properties: length, key, getItem, setItem, removeItem, and clear.

@Salvador Dali 2014-03-23 05:45:14

As it was mentioned, there is almost no difference except of nonexisting key. The difference in performance varies depending on what browser/OS are you using. But it is not really that different.

I suggest you to use standard interface, just because it is a recommended way of using it.

@Ted Hopp 2014-04-09 14:59:51

"I suggest you to use standard interface" - Both interfaces are specified in the standard.

@Salvador Dali 2014-04-09 19:53:46

@TedHopp I think that only setItem and getItem are specified in the standard.

@Ted Hopp 2014-04-09 21:32:17

On the contrary. From the standard: "The supported property names on a Storage object are the keys of each key/value pair currently present in the list associated with the object, in the order that the keys were last added to the storage area."

@Dave Mackintosh 2013-06-09 09:57:00

I know it's an old post but since nobody actually mentioned performance I set up some JsPerf tests to benchmark it and as well as being a coherent interface getItem and setItem are also consistently faster than using dot notation or brackets as well as being much easier to read.

Here are my tests on JsPerf

@PlantTheIdea 2013-11-14 04:37:51

ur jsPerf did not include brackets in its test. i've added them and run some tests, performance is browser-based. on chrome and firefox both, getItem and setItem were the slowest in each category, with dot being fastest on chrome and bracket being fastest on firefox. i also think 'being much easier to read' is entirely subjective ... yeah it states the function its performing, but anyone that has ever worked with object or array variables would know in half a second what's happening with dot / bracket.

@Dave Mackintosh 2013-11-14 10:57:36

You're right, at the time of writing those tests the getters and setters were consistently faster than dot notation. Not the case anymore. When I get 5 minutes I'll come back and update this answer. Thanks for pointing that out.

Related Questions

Sponsored Content

18 Answered Questions

20 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

10 Answered Questions

[SOLVED] Clearing localStorage in javascript?

78 Answered Questions

[SOLVED] How to merge two arrays in JavaScript and de-duplicate items

17 Answered Questions

[SOLVED] How to insert an item into an array at a specific index (JavaScript)?

47 Answered Questions

[SOLVED] Get the last item in an array in Javascript

  • 2010-07-09 19:45:06
  • balexander
  • 1427834 View
  • 1041 Score
  • 47 Answer
  • Tags:   javascript arrays

7 Answered Questions

12 Answered Questions

[SOLVED] What is the max size of localStorage values?

Sponsored Content