Typowe rozwiązania do przechowywania danych front-end obejmują głównie:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageitd., na przykład:
| charakterystyczny | ciasteczko | localStorage | sessionStorage | indexedDB | | Cykl życia danych | Zazwyczaj generowany przez serwer, można ustawić czas wygaśnięcia; Można również generować komponenty takie jak adopcja front-end i js-cookie | Jeśli nie jest posprzątana, zawsze tam jest; Po zamknięciu przeglądarki również jest zapisywana lokalnie, ale obsługa między przeglądarkami nie jest obsługiwana | Czyszczenie i odświeżanie strony nadal będzie istnieć po jej zamknięciu i nie jest wspierana interakcja między stronami | Dopóki nie zostanie oczyszczony, zawsze istniał | | Rozmiar magazynu danych | 4K | 5M | 5M | Brak limitu rozmiaru | | Komunikuj się z serwerem | Jest on zawsze wyświetlany w nagłówku żądania, co wpływa na wydajność żądania; Jednocześnie, ponieważ jest zawarty w żądaniu, jest również podatny na problemy z bezpieczeństwem | Nieuczestniczący | Nieuczestniczący | Nieuczestniczący | | Osobliwością | Pary klucz-wartość łańcuch-łańcuch przechowują dane lokalnie | Pary klucz-wartość łańcuch-łańcuch przechowują dane lokalnie | Pary klucz-wartość łańcuch-łańcuch przechowują dane lokalnie | IndexedDB to baza danych nierelacyjna (operacje za pomocą instrukcji SQL nie są obsługiwane). Może przechowywać duże ilości danych, zapewniać interfejsy do zapytań i budować indeksy, czego inne rozwiązania pamięci masowej nie są w stanie zapewnić. |
IndexedDB
Ten artykuł głównie opisuje wykorzystanie IndexedDB do przechowywania danych front-end i jest przedstawiony następująco:
IndexedDB to podstawowe API do przechowywania dużych ilości danych strukturalnych (a także plików/binarnych dużych obiektów (blobs)) po stronie klienta. API wykorzystuje indeksy, aby umożliwić wysokowydajne wyszukiwania danych. Chociaż Web Storage jest przydatny do przechowywania mniejszych ilości danych, nie jest tak dobry jak przechowywanie większych ilości danych strukturalnych. IndexedDB oferuje rozwiązanie tego scenariusza. Ta strona jest główną stroną przewodnika dla MDN IndexedDB – tutaj udostępniamy pełne informacje o API i przewodnik po użytkowaniu, szczegóły wsparcia przeglądarki oraz linki do wyjaśnień kluczowych koncepcji.
IndexedDB posiada następujące funkcje:
(1) Przechowywanie par klucz-wartość. IndexedDB używa magazynu obiektowego do przechowywania danych. Wszystkie typy danych mogą być deponowane bezpośrednio, w tym obiekty JavaScript. W repozytorium obiektów dane są przechowywane w formie "par klucz-wartość", a każdy rekord danych ma odpowiadający mu klucz główny, który jest unikalny i nie może być zduplikowany, w przeciwnym razie zostanie wyrzucony błąd.
(2) Asynchroniczny. IndexedDB nie blokuje przeglądarki i użytkownik może wykonywać inne operacje, w przeciwieństwie do LocalStorage, który działa synchronicznie. Projektowanie asynchroniczne ma na celu zapobieganie odczytowi i zapisywaniu dużych ilości danych, co spowalnia wydajność stron internetowych.
(3) Sprawy wsparcia. IndexedDB obsługuje transakcje, co oznacza, że jeśli jeden z kroków operacji się nie powiedzie, cała transakcja zostanie anulowana, a baza danych zostanie cofnięta do stanu sprzed transakcji, bez konieczności przepisywania tylko części danych.
(4) Ograniczenie homologii. IndexedDB podlega temu samemu limitowi pochodzenia, a każda baza danych odpowiada nazwie domeny, która ją utworzyła. Strony internetowe mogą uzyskać dostęp tylko do baz danych pod własnymi nazwami domen, a nie do baz danych międzydomenowych.
(5) Duża przestrzeń magazynowa. IndexedDB ma znacznie większą przestrzeń pamięci niż LocalStorage, zazwyczaj nie mniejszą niż 250MB, i nie ma górnego limitu.
(6) Obsługa pamięci binarnej. IndexedDB może przechowywać nie tylko ciągi znaków, ale także dane binarne (obiekty ArrayBuffer i obiekty Blob).
Jeśli trudno jest zacząć bezpośrednio z IndexedDB i musisz go sam zapakować, możesz użyć pakietów w pakiecie, jak poniżej:
- localForage: Prosty Polyfill, który zapewnia prostą składnię wartości dla magazynów danych po stronie klienta. W tle korzysta z IndexedDB, a w przeglądarkach nieobsługujących IndexedDB korzysta z WebSQL lub localStorage.
- Dexie.js: Wrappery IndexedDB umożliwiają szybszy rozwój kodu dzięki prostej składni.
- ZangoDB: Interfejs IndexedDB podobny do MongoDB, wspierający większość znanych funkcji filtrowania, projekcji, sortowania, aktualizacji i agregacji MongoDB.
- JsStore: Wrapper IndexedDB z składnią SQL.
- MiniMongo: MongoDB w pamięci klienta obsługiwana przez localstorage, synchronizacja serwera przez http. MeteorJS korzysta z MiniMongo.
- PouchDB: Klient implementujący CouchDB w przeglądarce za pomocą IndexedDB.
- idb: Mała (〜1.15k) biblioteka z większością API podobną do IndexedDB, ale z drobnymi ulepszeniami, które znacznie poprawiają użyteczność bazy danych.
- idb-keyval: Super prosta i mała (~600B) para pamięci pamięci opartej na obietnicy opartej na obietnicach zaimplementowanej za pomocą IndexedDB.
- sifrr-storage: Bardzo mała (~2kB) baza danych klucz-wartość po stronie klienta oparta na obietnicach. Implementowane na podstawie IndexedDB, localStorage, WebSQL i plików cookie. Może automatycznie wybierać wspierane bazy danych wymienione powyżej i używać ich według priorytetu.
- lovefield: Lovefield to relacyjna baza danych dla aplikacji webowych, napisana w JavaScript, może działać w różnych środowiskach przeglądarkowych i oferuje API podobne do SQL, które jest szybkie, bezpieczne i łatwe w obsłudze.
lokalne pasze
localForage to szybkie i proste repozytorium JavaScript. localForage poprawia doświadczenie offline aplikacji webowych, wykorzystując asynchroniczne przechowywanie (IndexedDB lub WebSQL) oraz proste API podobne do localStorage. localForage używa localStorage w przeglądarkach, które nie obsługują IndexedDB ani WebSQL.
Adres GitHub:Logowanie do linku jest widoczne.
Chiński samouczek:Logowanie do linku jest widoczne.
localForage udostępnia dwa różne pliki js, różnice są następujące:
localforage.js: biblioteka Promise zawierająca implementację Liego (Logowanie do linku jest widoczne.), plik jest stosunkowo duży, a składnia Promise może być używana w starszych przeglądarkach.
localforage.nopromises.js: Nie ma implementacji Promise, obsługiwane są jedynie nowe wersje przeglądarek.
Kod testowy:
(Koniec)
|
Opublikowano 12.10.2023 20:42:27
|
|
|
|
Ziemianin|
Opublikowano 02.03.2025 19:12:18
|
