Reading localStorage values via indexes

Question

Double your localStorage read performance in Chrome using indexes ls.getItem[i] not keys ls.getItem('key')

Source: this tweet and this talk (slide 19) by some guys that wrote a couple of awesome JavaSciript libraries. I guess these guys know what they are talking about, so I'm wondering why this doesn't work for me:

localStorage.setItem(0, 'Hello world');
localStorage.getItem(0); // 'Hello World' – Works as expected
localStorage.getItem[0]; // undefined

Did I misunderstand something? According to that talk, the last method call should return 'Hello world' not undefined.

They've also linked to this JS Bin, but when reading the values via index there, I still get undefined.

Edit: I know how to properly read the indexes with localStorage, I'm asking about getItem with indexes. It seems the talk just suggests a wrong usage? Also, I wonder why 32 people retweeted that usage, without having tested it. Those things irritate me.

Answer 1

My name is Chris and I am the one responsible for the slide that is causing confusion. For the confusion, I apologize. The slide was somewhat of a joke; allow me to explain..

In the days leading up to our panel, a tweet was posted and retweeted about doubling your read performance of localStorage. The tweet is the one you referenced (Twitter). However, when I saw this tweet, I did a double take because the syntax looked very wrong to me. I tested the syntax only to discover the same thing that you did: this syntax is clearly not valid if you are trying to access values in localStorage.

On stage at SXSW, this myth was presented as a joke. Yes, you get double the performance from referencing number indexes on localStorage.getItem. However, all of the values are undefined.

Anyway, it appears that in the attempt to undo the spread of misinformation, I have managed to spread it further. Thanks for bringing the issue to our attention!

Answer 2

localStorage.getItem();

Is a function so you can't acces it using the array notation, instead you can use:

localStorage.setItem(0, 'foo');
localStorage[0]; // 'foo'

If you use a string key you can do this:

localStorage.setItem('foo', 'bar');
localStorage.foo // 'bar'

Answer 3

You just can't do that. The two proper ways to get an item are by getItem or by an index directly on localStorage; not by getting a property of getItem.

There's nothing in the documentation that mentions this feature, and it doesn't work on any browser I've tried, so I'm not sure where they got it from. Maybe it's just so exciting that it improves performance that they didn't bother to check if it worked?

Answer 4

I think it should just be:

localStorage[0]

That certainly works in the most recent version of Chrome.

Answer 5

I don't see how this could work:

localStorage.getItem[0];

getItem is a method and can't be accessed like that.

It is possible to access localStorage directly by the key though. It can be done like this:

console.log( localStorage[0] );
console.log( localStorage['test'] );

Whether or not it is faster than the methods, you'd have to test it for yourself.

jsFiddle here.

Answer 6

Accesing via index doesn't work (at least in Chrome). But you can use:

localStorage.getItem(localStorage.key(0));

localStorage.key(n) returns the value of the nth key, which in turn is passed to localStorage.getItem().