Чем indexedDB концептуально отличается от локального хранилища HTML5? - PullRequest
65 голосов
/ 08 мая 2011
  1. И indexedDB, и локальное хранилище являются хранилищами ключевых значений.В чем преимущество наличия двух хранилищ ключей / значений?
  2. indexedDB является асинхронным, но соединения (наиболее трудоемкие) выполняются вручную.Похоже, они работают в том же потоке, что и асинхронные вызовы.Как это не заблокирует пользовательский интерфейс?
  3. indexedDB позволяет хранить больше.Почему бы не увеличить размер магазина HTML5?
  4. Я чешу голову.В чем смысл indexedDB?

Ответы [ 3 ]

90 голосов
/ 08 мая 2011

IndexedDB не является хранилищем значений ключей так же, как локальное хранилище. Локальное хранилище просто хранит строки, поэтому для помещения объекта в локальное хранилище обычно используется JSON.stringify it:

myObject = {a: 1, b: 2, c: 3};
localStorage.setItem("uniq", JSON.stringify(myObject));

Это хорошо для поиска объекта с ключом uniq, но единственный способ вернуть свойства myObject из локального хранилища - это JSON.parse-объект и проверить его:

var myStorageObject = JSON.parse(localStorage.getItem("uniq"));
window.alert(myStorageObject.b);

Это нормально, если у вас есть только один или несколько объектов в локальном хранилище. Но представьте, что у вас есть тысяча объектов, у каждого из которых есть свойство b, и вы хотите что-то сделать только с теми, у которых b==2. С локальным хранилищем вам придется перебирать весь магазин и проверять b на каждом предмете, что является большой потраченной впустую обработкой.

С IndexedDB вы можете хранить вещи, отличные от строк, в значении : «Это включает в себя простые типы, такие как DOMString и Date, а также экземпляры Object и Array». Кроме того, вы можете создавать индексы для свойств объектов, которые вы сохранили в значении. Таким образом, с помощью IndexedDb вы можете поместить в него те же тысячи объектов, но создать индекс для свойства b и использовать его для простого извлечения объектов, где b==2, без дополнительных затрат на сканирование каждого объекта в магазине.

По крайней мере, это идея. API IndexedDB не очень интуитивно понятен.

Они, кажется, работают в том же потоке, что и асинхронные вызовы. Как это не заблокирует пользовательский интерфейс?

Асинхронный не то же самое, что многопоточный, JavaScript, как правило, не многопоточный . Любая тяжелая обработка, которую вы выполняете в JS, блокирует пользовательский интерфейс, если вы хотите минимизировать блокировку пользовательского интерфейса, попробуйте Web Workers .

indexedDB позволяет увеличить хранилище. Почему бы не увеличить размер магазина HTML5?

Потому что без надлежащей индексации она будет становиться все медленнее, чем больше.

6 голосов
/ 01 июля 2011

Добавляя к ответу пользователя robertc, indexedDB знает «диапазоны», поэтому вы можете искать и извлекать все записи, которые начинаются с «ab» и заканчиваются на abd, чтобы найти «abc» и т. Д.

3 голосов
/ 20 марта 2018

Я наткнулся на эту хорошую статью, в которой обсуждается localstorage vs indexeddb и другие возможные варианты.

(все значения приведены в миллисекундах)

https://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/

memory comparison

Подводя итог статьи (полностью авторской точки зрения),

  1. Во всех трех Chrome, Firefox и Edge, LocalStorage полностью блокирует DOMв то время как вы пишете данные 2. Блокировка намного более заметна, чем в оперативной памяти, поскольку браузер фактически должен выполнять сброс на диск.
  2. Не удивительно, поскольку любой синхронный код блокирует в памятиоперации тоже блокируют.DOM блокируется во время длительных вставок, но если вы не имеете дело с большим количеством данных, вы вряд ли заметите, потому что операции в памяти действительно быстрые.
  3. В Firefox иChrome, IndexedDB медленнее, чем LocalStorage для основных вставок значения ключа, и он все еще блокирует DOM.В Chrome он также медленнее, чем WebSQL, который блокирует DOM, но не так сильно.Только в Edge и Safari IndexedDB удается работать в фоновом режиме, не прерывая пользовательский интерфейс, и, что еще хуже, это два браузера, которые лишь частично реализуют спецификацию IndexedDB.

  4. IndexedDB работает хорошов веб-работнике, где он работает примерно с той же скоростью, но без блокировки DOM.Единственным исключением является Safari, который не поддерживает IndexedDB внутри рабочего, но все же не блокирует пользовательский интерфейс.

  5. localmemory идеален, если данные просты и минимальны

...