Vanliga frontend-datalagringslösningar inkluderar huvudsakligen:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageetc., till exempel:
| kännetecken | småkaka | localStorage | sessionStorage | indexedDB | | Datalivscykel | Generellt genererad av servern kan utgångstiden ställas in; Komponenter som front-end-adoption och js-cookie kan också genereras | Om den inte städas upp finns den alltid där; När webbläsaren är stängd sparas den också lokalt, men webbläsaroberoende stöd stöds inte | Rensning och uppdatering av sidan kommer fortfarande att finnas kvar när sidan är stängd, och interaktion mellan sidor stöds inte | Om det inte rensas upp har det alltid funnits | | Databutikens storlek | 4K | 5M | 5M | Ingen storleksgräns | | Kommunicera med servern | Den finns i den begärda headern varje gång, vilket påverkar prestandan av begäran; Samtidigt, eftersom det ingår i förfrågan, är det också känsligt för säkerhetsproblem | Deltar inte | Deltar inte | Deltar inte | | egendomlighet | Sträng-nyckel-värdepar lagrar data lokalt | Sträng-nyckel-värdepar lagrar data lokalt | Sträng-nyckel-värdepar lagrar data lokalt | IndexedDB är en icke-relationell databas (operationer via SQL-satser stöds inte). Den kan lagra stora mängder data, tillhandahålla gränssnitt för frågor och bygga index, vilket andra lagringslösningar inte kan erbjuda. |
IndexedDB
Denna artikel beskriver främst användningen av IndexedDB för front-end-lagring och introduceras enligt följande:
IndexedDB är ett underliggande API för att lagra stora mängder strukturerad data (även fil-/binärstora objekt (blobs)) på klientsidan. API:et använder index för att möjliggöra högpresterande sökningar av data. Även om webblagring är användbart för att lagra mindre mängder data, är det inte lika bra som att lagra större mängder strukturerad data. IndexedDB erbjuder en lösning för detta scenario. Denna sida är huvudguiden för MDN IndexedDB – här tillhandahåller vi en fullständig API-referens och användningsguide, information om webbläsarstöd och länkar till några förklaringar av nyckelbegrepp.
IndexedDB har följande funktioner:
(1) Lagring av nyckelvärdespar. IndexedDB använder ett objektlager för att lagra data. Alla typer av data kan deponeras direkt, inklusive JavaScript-objekt. I objektarkivet lagras data i form av "nyckel-värde-par", och varje datapost har en motsvarande primärnyckel, som är unik och inte kan dupliceras, annars kommer ett fel att kastas.
(2) Asynkront. IndexedDB låser inte webbläsaren och användaren kan fortfarande utföra andra operationer, till skillnad från LocalStorage som arbetar synkront. Asynkron design syftar till att förhindra att stora mängder data läses och skrivs, vilket saktar ner webbsidornas prestanda.
(3) Stödsärenden. IndexedDB stöder transaktioner, vilket innebär att om ett av operationsstegen misslyckas, avbryts hela transaktionen och databasen återställs till tillståndet innan transaktionen ägde rum, och det finns inget fall av att bara skriva om en del av datan.
(4) Homologirestriktion. IndexedDB omfattas av samma ursprungsgräns, och varje databas motsvarar domännamnet som skapade den. Webbsidor kan endast komma åt databaser under sina egna domännamn, inte databaser över flera domäner.
(5) Stort förvaringsutrymme. IndexedDB har ett mycket större lagringsutrymme än LocalStorage, vanligtvis inte mindre än 250 MB, och det finns ingen övre gräns.
(6) Stöd för binär lagring. IndexedDB kan lagra inte bara strängar utan även binär data (ArrayBuffer-objekt och Blob-objekt).
Om det är svårt att komma igång direkt med IndexedDB och du behöver kapsla in det själv, kan du använda några paketpaket, enligt följande:
- localForage: En enkel Polyfill som tillhandahåller en enkel värdesyntax för klientsidans datalager. Den använder IndexedDB i bakgrunden och faller tillbaka på WebSQL eller localStorage i webbläsare som inte stödjer IndexedDB.
- Dexie.js: IndexedDB:s wrappers möjliggör snabbare kodutveckling genom enkel syntax.
- ZangoDB: Ett IndexedDB-gränssnitt liknande MongoDB, som stöder de flesta av MongoDBs välkända filtrerings-, projektions-, sorterings-, uppdaterings- och aggregeringsfunktioner.
- JsStore: En IndexedDB-wrapper med SQL-syntax.
- MiniMongo: MongoDB i klientminne som stöds av lokallagring, serversynkronisering via http. MeteorJS använder MiniMongo.
- PouchDB: En klient som implementerar CouchDB i webbläsaren med hjälp av IndexedDB.
- idb: Ett litet (〜1.15k) bibliotek med större delen av API:et liknande IndexedDB, men med några mindre förbättringar som avsevärt förbättrar databasens användbarhet.
- idb-keyval: Superenkel och liten (~600B) löftesbaserad nyckel-värdespar-lagring implementerad med IndexedDB.
- sifrr-storage: En mycket liten (~2 kB) löftesbaserad klientsida nyckelvärdesdatabas. Implementerad baserat på IndexedDB, localStorage, WebSQL och cookies. Den kan automatiskt välja de stödda databaser som nämnts ovan och använda dem i prioritetsordning.
- lovefield: Lovefield är en relationsdatabas för webbapplikationer, skriven i JavaScript, kan köras i olika webbläsarmiljöer och erbjuder ett SQL-liknande API som är snabbt, säkert och lätt att använda.
lokal Fodring
localForage är ett snabbt och enkelt JavaScript-arkiv. localForage förbättrar offlineupplevelsen av webbapplikationer genom att använda asynkron lagring (IndexedDB eller WebSQL) och ett enkelt API liknande localStorage. localForage använder localStorage i webbläsare som inte har stöd för IndexedDB eller WebSQL.
GitHub-adress:Inloggningen med hyperlänken är synlig.
Kinesisk handledning:Inloggningen med hyperlänken är synlig.
localForage tillhandahåller två olika js-filer, skillnaderna är följande:
localforage.js: ett löftesbibliotek som innehåller lie-implementeringen (Inloggningen med hyperlänken är synlig.), är filen relativt stor, och löftessyntaxen kan användas i äldre webbläsare.
localforage.nopromises.js: Det finns ingen implementation av Promise, endast nya versioner av webbläsare stöds.
Testkod:
(Slut)
|
Publicerad på 2023-10-12 20:42:27
|
|
|
|
Hyresvärd|
Publicerad på 2025-03-02 19:12:18
|
