Czym koncepcyjnie różni się indexedDB od lokalnego magazynu HTML5?

1. Zarówno indeksowana baza danych, jak i pamięć lokalna są magazynami wartości kluczy. Jaka jest zaleta posiadania dwóch magazynów kluczy / wartości?
2. indexedDB jest asynchroniczna, ale łączenia (najbardziej czasochłonne) są wykonywane ręcznie. Wydaje się, że działają w tym samym wątku, w którym wykonano wywołania asynchroniczne. Jak to nie zablokuje interfejsu użytkownika?
3. indexedDB pozwala na większy magazyn. Dlaczego nie zwiększyć rozmiaru sklepu HTML5?
4. Drapię się w głowę. Jaki jest sens indexedDB?

IndexedDB nie jest magazynem klucza i wartości w taki sam sposób, jak magazyn lokalny. Pamięć lokalna przechowuje tylko ciągi znaków, więc aby umieścić obiekt w pamięci lokalnej, typowym podejściem jest JSON.stringify it:

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

Jest to dobre do znalezienia obiektu z kluczem uniq, ale jedynym sposobem na odzyskanie właściwości myObject z pamięci lokalnej jest JSON.parse obiekt i zbadanie go:

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

Jest to dobre, jeśli masz tylko jeden lub kilka obiektów w pamięci lokalnej. Ale wyobraź sobie, że masz tysiąc obiektów, z których wszystkie mają własność b, i chcesz zrobić coś tylko z tymi, w których b==2. Dzięki lokalnej pamięci będziesz musiał przejrzeć cały sklep i sprawdzićb każdy przedmiot, co oznacza dużo zmarnowanego przetwarzania.

Dzięki IndexedDB możesz przechowywać inne elementy niż ciągi w wartości : „Obejmuje to proste typy, takie jak DOMString i Date, a także instancje Object i Array”. Nie tylko to, ale możesz tworzyć indeksy na właściwościach obiektów, które zostały zapisane w wartości. Więc dzięki IndexedDb możesz umieścić w nim te same tysiące obiektów, ale utworzyć indeks dla bwłaściwości i użyć go do pobrania obiektów, w którychb==2 bez narzutu skanowania każdego obiektu w sklepie.

Przynajmniej taki jest zamysł. Interfejs API IndexedDB nie jest zbyt intuicyjny.

Wydaje się, że działają w tym samym wątku, w którym wykonano wywołania asynchroniczne. Jak to nie zablokuje interfejsu użytkownika?

Asynchroniczny to nie to samo, co wielowątkowy, JavaScript z reguły nie jest wielowątkowy . Każde ciężkie przetwarzanie, które wykonujesz w JS, zablokuje UI, jeśli chcesz zminimalizować blokowanie UI, wypróbuj Web Workers .

indexedDB pozwala na większy magazyn. Dlaczego nie zwiększyć rozmiaru sklepu HTML5?

Ponieważ bez odpowiedniego indeksowania stawałby się coraz wolniejszy, im większy byłby.

Natknąłem się na ten dobry artykuł omawiający o localstorage vs indexeddb i innych możliwych opcjach.

(wszystkie poniższe wartości są w milisekundach)

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

Podsumowując z artykułu (w całości opinie autora),

1. We wszystkich trzech przeglądarkach Chrome, Firefox i Edge, LocalStorage w pełni blokuje DOM podczas zapisywania danych 2. Blokowanie jest dużo bardziej zauważalne niż w przypadku pamięci w pamięci, ponieważ przeglądarka musi w rzeczywistości opróżniać dysk na dysk.
2. Nic dziwnego, ponieważ każdy kod synchroniczny blokuje, operacje w pamięci są również blokowane. Bloki DOM podczas długotrwałego wstawiania, ale jeśli nie masz do czynienia z dużą ilością danych, raczej nie zauważysz, ponieważ operacje w pamięci są naprawdę szybkie.

3. Zarówno w Firefoksie, jak i Chrome, IndexedDB jest wolniejszy niż LocalStorage w przypadku podstawowego wstawiania klucza i wartości i nadal blokuje DOM. W Chrome jest również wolniejszy niż WebSQL, który blokuje DOM, ale nie tak bardzo. Tylko w Edge i Safari IndexedDB może działać w tle bez przerywania interfejsu użytkownika, a co gorsza, są to dwie przeglądarki, które tylko częściowo implementują specyfikację IndexedDB.

4. IndexedDB działa płynnie w pracowniku sieciowym, gdzie działa z mniej więcej taką samą prędkością, ale bez blokowania DOM. Jedynym wyjątkiem jest Safari, które nie obsługuje IndexedDB wewnątrz procesu roboczego, ale nadal nie blokuje interfejsu użytkownika.

5. Pamięć lokalna jest idealna, jeśli dane są proste i minimalne

Dodając do anwser robertc, indexedDB zna `` zakresy '', więc możesz wyszukiwać i pobierać wszystkie rekordy zaczynające się od `` ab '' i kończące się na abd ', aby znaleźć' abc 'itp.

Uruchom następujące w konsoli przeglądarki. Utworzy osobną jednostkę w aplikacji> Storage obok LocalStorage i SessionStorage

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

Możesz wysyłać zapytania do tego magazynu ze wszystkimi operacjami CRUD, w przeciwieństwie do innych dwóch magazynów, które mają mniejszą elastyczność i funkcje do zabawy.