Bežné riešenia na ukladanie dát na front-end úrovni zahŕňajú hlavne:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageatď., napríklad:
| charakteristický | koláčik | localStorage | sessionStorage | indexedDB | | Životný cyklus dát | Zvyčajne generované serverom, čas expirácie môže byť nastavený; Komponenty ako front-end adopcia a js-cookie môžu byť tiež generované | Pokiaľ nie je uprataná, je tam vždy; Keď je prehliadač zatvorený, uloží sa tiež lokálne, ale cross-browser nie je podporovaný | Čistenie a obnovovanie stránky bude stále existovať aj po zatvorení stránky a interakcia naprieč stránkami nie je podporovaná | Pokiaľ sa to nevyčistí, vždy tam bolo | | Veľkosť dátového úložiska | 4K | 5M | 5M | Žiadne obmedzenie veľkosti | | Komunikujte so serverom | Je zakaždým uvedený v požadovanej hlavičke, čo ovplyvňuje výkon požiadavky; Zároveň, keďže je zahrnutý v žiadosti, je náchylný aj na bezpečnostné problémy | Nezúčastňuje sa | Nezúčastňuje sa | Nezúčastňuje sa | | zvláštnosť | Páry kľúč-hodnota reťazca ukladajú dáta lokálne | Páry kľúč-hodnota reťazca ukladajú dáta lokálne | Páry kľúč-hodnota reťazca ukladajú dáta lokálne | IndexedDB je nerelačná databáza (operácie cez SQL príkazy nie sú podporované). Dokáže ukladať veľké množstvo dát, poskytovať rozhrania na dotazovanie a vytvárať indexy, čo iné úložné riešenia nedokážu poskytnúť. |
IndexedDB
Tento článok hlavne popisuje použitie IndexedDB pre front-end úložisko a je predstavený nasledovne:
IndexedDB je základné API na ukladanie veľkého množstva štruktúrovaných dát (tiež súborových/binárnych veľkých objektov (blobs)) na strane klienta. API používa indexy na umožnenie vysokovýkonného vyhľadávania dát. Hoci je webové úložisko užitočné na ukladanie menších množstiev dát, nie je také dobré ako ukladanie väčšieho množstva štruktúrovaných dát. IndexedDB poskytuje riešenie pre tento scenár. Táto stránka je hlavnou sprievodnou stránkou pre MDN IndexedDB – tu poskytujeme kompletnú API referenciu a príručku používania, podrobnosti o podpore prehliadača a odkazy na niektoré vysvetlenia kľúčových konceptov.
IndexedDB má nasledujúce funkcie:
(1) Kľúčovo-hodnotové párové úložisko. IndexedDB používa objektové úložisko na ukladanie dát. Všetky typy dát môžu byť uložené priamo, vrátane JavaScript objektov. V objektovom repozitári sú dáta uložené vo forme "párov kľúč-hodnota" a každý dátový záznam má zodpovedajúci primárny kľúč, ktorý je jedinečný a nemožno ho duplikovať, inak sa zobrazí chyba.
(2) Asynchrónne. IndexedDB nezamyká prehliadač a používateľ môže stále vykonávať iné operácie, na rozdiel od LocalStorage, ktorý funguje synchronne. Asynchrónny dizajn má zabrániť čítaniu a zápisu veľkého množstva dát, čo spomaľuje výkon webových stránok.
(3) Podporné záležitosti. IndexedDB podporuje transakcie, čo znamená, že ak jeden z krokov operácie zlyhá, celá transakcia sa zruší a databáza sa vráti do stavu pred transakciou, pričom nedochádza k prepisovaniu len časti dát.
(4) Homologické obmedzenie. IndexedDB podlieha rovnakému limitu pôvodu a každá databáza zodpovedá doménovému menu, ktoré ju vytvorilo. Webové stránky môžu pristupovať len k databázam pod vlastnými doménovými menami, nie k databázam naprieč doménami.
(5) Veľký úložný priestor. IndexedDB má oveľa väčší úložný priestor ako LocalStorage, zvyčajne nie menej ako 250MB, a neexistuje horný limit.
(6) Podpora binárneho ukladania. IndexedDB dokáže ukladať nielen reťazce, ale aj binárne dáta (objekty ArrayBuffer a objekty Blob).
Ak je ťažké začať priamo s IndexedDB a potrebujete si ho zapuzdriť sami, môžete použiť niektoré balené balíky, nasledovne:
- localForage: Jednoduchý Polyfill, ktorý poskytuje jednoduchú hodnotovú syntax pre dátové úložiská na strane klienta. Na pozadí používa IndexedDB a v prehliadačoch, ktoré IndexedDB nepodporujú, sa vracia k WebSQL alebo localStorage.
- Dexie.js: Obaly IndexedDB umožňujú rýchlejší vývoj kódu vďaka jednoduchej syntaxi.
- ZangoDB: Rozhranie IndexedDB podobné MongoDB, podporujúce väčšinu známych filtračných, projekčných, triediacich, aktualizačných a agregačných funkcií MongoDB.
- JsStore: IndexedDB wrapper so syntaxou SQL.
- MiniMongo: MongoDB v klientskej pamäti podporovaná localstorage, synchronizácia so serverom cez http. MeteorJS používa MiniMongo.
- PouchDB: Klient, ktorý implementuje CouchDB v prehliadači pomocou IndexedDB.
- idb: Malá (〜1.15k) knižnica s väčšinou API podobnou IndexedDB, ale s niekoľkými drobnými vylepšeniami, ktoré výrazne zlepšujú použiteľnosť databázy.
- idb-keyval: Veľmi jednoduché a malé (~600B) úložisko založené na prísľube kľúč-hodnota implementované pomocou IndexedDB.
- sifrr-storage: Veľmi malá (~2kB) databáza kľúč-hodnota na strane klienta založená na sľuboch. Implementované na základe IndexedDB, localStorage, WebSQL a cookies. Dokáže automaticky vybrať podporované databázy uvedené vyššie a používať ich podľa priority.
- lovefield: Lovefield je relačná databáza pre webové aplikácie, napísaná v JavaScripte, ktorá môže bežať v rôznych prehliadačoch a poskytuje API podobné SQL, ktoré je rýchle, bezpečné a jednoduché na používanie.
Miestny zber krmiva
localForage je rýchly a jednoduchý JavaScriptový repozitár. localForage zlepšuje offline zážitok webových aplikácií použitím asynchrónneho úložiska (IndexedDB alebo WebSQL) a jednoduchého API podobného localStorage. localForage používa localStorage v prehliadačoch, ktoré nepodporujú IndexedDB ani WebSQL.
GitHub adresa:Prihlásenie na hypertextový odkaz je viditeľné.
Čínsky tutoriál:Prihlásenie na hypertextový odkaz je viditeľné.
localForage poskytuje dva rôzne js súbory, rozdiely sú nasledovné:
localforage.js: knižnica Promise obsahujúca Lieovu implementáciu (Prihlásenie na hypertextový odkaz je viditeľné.), súbor je relatívne veľký a syntax Promise je možné použiť v starších prehliadačoch.
localforage.nopromises.js: Neexistuje implementácia Promise, podporované sú len nové verzie prehliadačov.
Testovací kód:
(Koniec)
|
Zverejnené 12. 10. 2023 20:42:27
|
|
|
|
Prenajímateľ|
Zverejnené 2. 3. 2025 19:12:18
|
