Speed/cost of localStorage

For what it's worth, here is a jsperf test.

The benchmark usage of localStorage is significantly slower than access of a regular object properties in both FF7 and IE9. Of course, this is just a micro-benchmark, and does not necessarily reflect real-world usage or performance...

Sample pulled from my FF 7 run to show what "significantly slower" means, in ops/second:

            native     local-storage    notes
small set   374,397    13,657           10 distinct items
large set   2,256      68               100 distinct items
read-bias   10,266     342              1 write, 10 reads, 10 distinct items

Also, there are restrictions on what can be put in localStorage. YMMV.

Just made a small benchmark. What i plan to do is to get some data from localStorage quite often and i wondered will it block. While localStorage.getItem is synced operation it may sound scary but is it?

• 1st test to call 1 million times localStorage to get item which does exist.
• 2nd test to call 1 million times localStorage to get item which does NOT exist.

Results:

"Item found: 0.0007991071428571318ms per call"

"Item not found: 0.0006365004639793477ms per call"

In short - just use it. It takes no time. 0.0007 of 1 millisecond.

https://jsbin.com/resuziqefa/edit?js,console

 let results = [];
 let sum = 0;
 localStorage.setItem('foo', 'foo bar baz foo bar baz foo bar baz foo');

 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('foo');
   let result = performance.now() - a;
   sum += result;
   results.push(result);
 }

 console.log(`Item found: ${sum / results.length}ms per call`);

 results = [];
 sum = 0;
 for (let i = 0; i < 1000000; i++) {
   let a = performance.now();
   localStorage.getItem('bar');
   let result = performance.now() - a;
   sum += result;
   results.push(result);
 }

 console.log(`Item not found: ${sum / results.length}ms per call`);

Apples to apples

There is not much value in comparing localStorage to object storage, the two have different purposes in JavaScript. It is likely that you will only need to touch localStorage a few times in your app and the rest of the work will be done in memory.

Local Storage vs Cookies

A better comparison against localStorage would be that of its classic counterpart, document.cookie. Both localStorage and document.cookie's main purpose is to persist a value across browser refreshes.

I've put together an example on codsandbox.io

• localStorage is two orders of magnitude faster than document.cookie.
• Object storage is an order of magnitude faster than localStorage (irrelevant but added for reference).

localStorage is by far the fastest mechanism to persist values across a browser refresh.

Note that I've precompiled cookie regex getters in order to make cookies as fast as possible and used the browser performance API for accurate measurements. All tests do a set of a unique key followed by a get of the same key.