Almindelige front-end datalagringsløsninger omfatter hovedsageligt:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageosv., for eksempel:
| karakteristisk | småkage | localStorage | sessionStorage | indexedDB | | Datalivscyklus | Generelt genereret af serveren kan udløbstiden fastsættes; Komponenter som front-end adoption og js-cookie kan også genereres | Medmindre den bliver ryddet op, er den altid der; Når browseren er lukket, gemmes den også lokalt, men cross-browser understøttes ikke | Rensning og opdatering af siden vil stadig eksistere, når siden er lukket, og interaktion på tværs af sider understøttes ikke | Medmindre den er blevet ryddet op, har den altid eksisteret | | Datalagerstørrelse | 4K | 5M | 5M | Ingen størrelsesbegrænsning | | Kommuniker med serveren | Den bæres i den anmodede header hver gang, hvilket har indflydelse på forespørgslens ydeevne; Samtidig, fordi det er inkluderet i anmodningen, er det også udsat for sikkerhedsproblemer | Ikke at deltage | Ikke at deltage | Ikke at deltage | | Ejendommelighed | Streng-nøgle-værdi-par gemmer data lokalt | Streng-nøgle-værdi-par gemmer data lokalt | Streng-nøgle-værdi-par gemmer data lokalt | IndexedDB er en ikke-relationel database (operationer via SQL-sætninger understøttes ikke). Den kan lagre store mængder data, tilbyde grænseflader til forespørgsler og bygge indekser, som andre lagringsløsninger ikke kan levere. |
IndexedDB
Denne artikel beskriver hovedsageligt brugen af IndexedDB til front-end lagring og introduceres således:
IndexedDB er et underliggende API til lagring af store mængder strukturerede data (også fil-/binære store objekter (blobs)) på klientsiden. API'et bruger indekser til at muliggøre højtydende søgninger af data. Selvom weblagring er nyttigt til at lagre mindre mængder data, er det ikke lige så godt som at opbevare større mængder strukturerede data. IndexedDB tilbyder en løsning på dette scenarie. Denne side er hovedvejledningen for MDN IndexedDB – her giver vi en komplet API-reference og brugsguide, oplysninger om browsersupport og links til nogle forklaringer af nøglebegreber.
IndexedDB har følgende funktioner:
(1) Nøgleværdi-par-lagring. IndexedDB bruger et objekt-lager til at gemme data. Alle typer data kan deponeres direkte, inklusive JavaScript-objekter. I objektarkivet gemmes data i form af "nøgle-værdi-par", og hver datapost har en tilsvarende primærnøgle, som er unik og ikke kan duplikeres, ellers vil der blive kastet en fejl.
(2) Asynkron. IndexedDB låser ikke browseren, og brugeren kan stadig udføre andre operationer, i modsætning til LocalStorage, som opererer synkront. Asynkront design har til formål at forhindre, at store mængder data bliver læst og skrevet, hvilket sænker websidernes ydeevne.
(3) Støtteanliggender. IndexedDB understøtter transaktioner, hvilket betyder, at hvis et af operationstrinene fejler, annulleres hele transaktionen, og databasen rulles tilbage til tilstanden før transaktionen, og der er ikke tale om kun at omskrive en del af dataene.
(4) Homologirestriktion. IndexedDB er underlagt samme oprindelsesgrænse, og hver database svarer til det domænenavn, der oprettede den. Websider kan kun tilgå databaser under deres egne domænenavne, ikke på tværs af domæner.
(5) Stort opbevaringsrum. IndexedDB har en meget større lagerplads end LocalStorage, generelt ikke mindre end 250MB, og der er ingen øvre grænse.
(6) Understøttelse af binær lagring. IndexedDB kan gemme ikke kun strenge, men også binære data (ArrayBuffer-objekter og Blob-objekter).
Hvis det er svært at komme direkte i gang med IndexedDB, og du selv skal indkapsle det, kan du bruge nogle pakkepakker, som følger:
- localForage: En simpel Polyfill, der giver en simpel værdisyntaks til klient-side datalagre. Den bruger IndexedDB i baggrunden og falder tilbage på WebSQL eller localStorage i browsere, der ikke understøtter IndexedDB.
- Dexie.js: IndexedDBs wrappers muliggør hurtigere kodeudvikling gennem simpel syntaks.
- ZangoDB: Et IndexedDB-interface lignende MongoDB, der understøtter de fleste af MongoDBs velkendte filtrerings-, projektions-, sorterings-, opdaterings- og aggregeringsfunktioner.
- JsStore: En IndexedDB-wrapper med SQL-syntaks.
- MiniMongo: MongoDB i klienthukommelsen understøttet af localstorage, serversynkronisering via http. MeteorJS bruger MiniMongo.
- PouchDB: En klient, der implementerer CouchDB i browseren ved hjælp af IndexedDB.
- idb: Et lille (〜1.15k) bibliotek med det meste af API'en lignende IndexedDB, men med nogle mindre forbedringer, der i høj grad forbedrer databasens brugervenlighed.
- idb-keyval: Super simpel og lille (~600B) løftebaseret nøgle-værdi par-lagring implementeret med IndexedDB.
- sifrr-storage: En meget lille (~2 kB) løftebaseret klient-side nøgleværdidatabase. Implementeret baseret på IndexedDB, localStorage, WebSQL og cookies. Den kan automatisk vælge de understøttede databaser nævnt ovenfor og bruge dem i prioriteret rækkefølge.
- lovefield: Lovefield er en relationel database til webapps, skrevet i JavaScript, kan køre i forskellige browsermiljøer og tilbyder et SQL-lignende API, der er hurtigt, sikkert og nemt at bruge.
lokalFoder
localForage er et hurtigt og simpelt JavaScript-repository. localForage forbedrer den offline oplevelse af webapplikationer ved at bruge asynkron lagring (IndexedDB eller WebSQL) og et simpelt API, der ligner localStorage. localForage bruger localStorage i browsere, der ikke understøtter IndexedDB eller WebSQL.
GitHub-adresse:Hyperlink-login er synlig.
Kinesisk vejledning:Hyperlink-login er synlig.
localForage tilbyder to forskellige js-filer, forskellene er som følger:
localforage.js: et Promise-bibliotek, der indeholder lie-implementeringen (Hyperlink-login er synlig.), filen er relativt stor, og promise-syntaksen kan bruges i ældre browsere.
localforage.nopromises.js: Der findes ingen implementering af Promise, kun nye versioner af browsere understøttes.
Testkode:
(Slut)
|
Opslået på 12/10/2023 20.42.27
|
|
|
|
Udlejer|
Opslået på 02/03/2025 19.12.18
|
