Скорость / стоимость localStorage

Question

Как быстро поиск значения в localStorage с Javascript?

Есть ли у кого-нибудь ссылки на какие-либо тесты производительности, которые указывают, стоит ли кэшировать данные в объекте JavaScript? Или браузер уже кэширует значения, к которым в любом случае обращаются из localStorage?

Меня особенно интересуют реализации localStorage в Firefox и Chrome.

Answer 1

Для чего стоит, вот тест jsperf .

Использование localStorage в эталонном тесте значительно медленнее , чем доступ к обычномусвойства объекта в FF7 и IE9.Конечно, это всего лишь микро-тест, и не обязательно отражает реальное использование или производительность ...

Образец, взятый из моего прогона FF 7, чтобы показать, что "значительно медленнее""означает, в операциях в секунду:

            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

Кроме того, существуют ограничения на того, что можно поместить в localStorage .YMMV.

Answer 2

Только что сделал небольшой тест. То, что я планирую сделать, это получить некоторые данные из localStorage довольно часто, и я подумал, будет ли он блокировать. Пока localStorage.getItem является синхронизированной операцией, это может звучать страшно, но так ли это?

• 1-й тест для вызова миллион раз localStorage, чтобы получить элемент, который существует.
• 2-й тест для вызова миллион раз localStorage, чтобы получить элемент, который НЕ существует.

Результаты:

"Товар найден: 0,0007991071428571318мс за звонок"

"Товар не найден: 0,0006365004639793477ms за звонок"

Короче говоря - просто используйте его. Это не займет много времени. 0,0007 из 1 миллисекунды.

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`);

Answer 3

яблоки с яблоками

Сравнение localStorage с хранилищем объектов не имеет большого значения, в JavaScript эти два назначения имеют разные цели.Вполне вероятно, что вам нужно будет всего лишь несколько раз прикоснуться к localStorage в своем приложении, а остальная часть работы будет выполнена в памяти.

Локальное хранилище против файлов cookie

Лучшее сравнениепротив localStorage было бы против его классического аналога, document.cookie.Основная цель как localStorage, так и document.cookie заключается в сохранении значения при обновлении браузера.

Я собрал пример для codsandbox.io

• localStorage на два порядка быстрее, чем document.cookie.
• Object хранилище на порядок быстрее, чем localStorage (не имеет значения, но добавлено для справки).

localStorage - самый быстрый механизм сохранения значений при обновлении браузера.

Обратите внимание, что я предварительно скомпилировал методы получения регулярных выражений cookie, чтобы сделать куки максимально быстрыми и использовал API производительности браузера для точных измерений.Все тесты выполняют набор уникальных ключей с последующим получением того же ключа.