Is localStorage.getItem ('item') better than localStorage.item or localStorage ['item']?

Question

I recently asked a question about LocalStorage . Using JSON.parse(localStorage.item) and JSON.parse(localStorage['item']) did not work to return NULL when the item has not yet been set.

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:

Getters and setters provide consistent standardization and a cross-browser compatible way of working with LS api and should always be preferable to other methods. - christoph

I enjoyed using the abbreviated point and bracket notations for localStorage, but I'm curious to know that others accept this. Is localStorage.getItem ('item') better than localStorage.item or localStorage ['item'] OR if they work, are these abbreviations in order?

Answer 1

Both direct access to the property ( localStorage.item or localStorage['item'] ) and the use of the functional interface ( getItem('item') ) work fine. Both standards and cross browser are compatible. ^* According to specification :

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

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

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

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

In particular, note that the first statement will not affect the localStorage.length property (with the possible exception of increasing it if localStorage did not already have the 'length' key). In this regard, the specification seems internally contradictory.

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

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

Interestingly, the first is non-use in Chrome, but it is synonymous with a functional call in Firefox. The second will always register the number of keys present in localStorage .

^* _{This is true for browsers that primarily support web storage. (This applies to almost all modern desktop and mobile browsers.) For environments that simulate local storage using cookies or other methods, the behavior depends on the pad used. Several polyfills for localStorage can be found here .}

Answer 2

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

The storage object is quite special; it is an object that provides access to a list of key / value pairs. So this is not an ordinary object or array.

For example, it has a length attribute, which, unlike the length attribute of the array, is read-only and returns the number of keys in the store.

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 getters / setters. What if you want to set an element named 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, this is even more critical since they are writable, and you may accidentally overwrite methods such as getItem . Using API methods prevents any of these potential problems and provides a consistent interface.

Another interesting point is the following paragraph in the specification (highlighted by me):

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

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

Answer 3

I know this is an old post, but since no one mentioned performance, I installed some JsPerf tests to compare it, as well as the getItem and setItem serial interfaces are also consistently faster than using dot notation or parentheses and also much easier to read.

Here are my JsPerf tests

Answer 4

As already mentioned, there is practically no difference other than a nonexistent key. the difference in performance varies depending on which browser / OS you are using. But actually it is not.

I suggest you use the standard interface, just because this is the recommended way to use it.