Чим indexedDB концептуально відрізняється від локального сховища HTML5?

1. І індексований DB, і локальне сховище є сховищами ключових значень. У чому перевага наявності двох сховищ ключів / вартості?
2. indexedDB є асинхронним, але об'єднання (найбільш трудомістке) є ручним. Здається, вони працюють у тому самому потоці, що й асинхронні дзвінки. Як це не заблокує інтерфейс?
3. indexedDB дозволяє збільшити сховище. Чому б не збільшити розмір магазину HTML5?
4. Я чухаю голову. Який сенс у indexedDB?

IndexedDB не є сховищем ключ-значення так само, як і Місцеве сховище. Локальне сховище просто зберігає рядки, тому для розміщення об’єкта в локальному сховищі звичайним підходом є JSON.stringify :

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?

Оскільки, без належного індексування, воно ставало б все повільніше, чим більше воно ставало.

Я натрапив на цю хорошу статтю, яка обговорювала питання localstorage проти indexeddb та інші можливі варіанти.

(усі наведені нижче значення вказані в мілісекундах)

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

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

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 ідеально підходить, якщо дані прості та мінімальні

Додаючи до анвера robertc, indexedDB знає "діапазони", щоб ви могли шукати та отримувати всі записи, які починаються з "ab" і закінчуються abd ", щоб знайти" abc "тощо.

Запустіть наступне в консолі браузера. Він створить окрему сутність в Application> Storage поряд з LocalStorage та SessionStorage

const request = indexedDB.open("notes");
request.onupgradeneeded = e => {
  alert("upgrade");
}
request.onsuccess = e => {
  alert("success");
}
request.onerror = e => {
  alert("error");
}

Ви можете запитувати цей сховище з усіма операціями CRUD, на відміну від інших двох сховищ, які мають меншу гнучкість та функції, з якими можна грати.