Vanlige front-end datalagringsløsninger inkluderer hovedsakelig:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageosv., for eksempel:
| karakteristisk | kjeks | localStorage | sessionStorage | indexedDB | | Datalivssyklus | Vanligvis generert av serveren, kan utløpstiden innstilles; Komponenter som front-end-adopsjon og js-cookie kan også genereres | Med mindre det ryddes, er det alltid der; Når nettleseren er lukket, lagres den også lokalt, men kryss-nettleser støttes ikke | Rensing og oppdatering av siden vil fortsatt eksistere når siden lukkes, og interaksjon på tvers av sider støttes ikke | Med mindre den blir ryddet opp, har den alltid eksistert | | Datalagringsstørrelse | 4K | 5M | 5M | Ingen størrelsesgrense | | Kommuniser med serveren | Den bæres i den forespurte headeren hver gang, noe som påvirker ytelsen til forespørselen; Samtidig, fordi det er inkludert i forespørselen, er det også utsatt for sikkerhetsproblemer | Deltar ikke | Deltar ikke | Deltar ikke | | Eiendommelighet | Streng-nøkkel-verdi-par lagrer data lokalt | Streng-nøkkel-verdi-par lagrer data lokalt | Streng-nøkkel-verdi-par lagrer data lokalt | IndexedDB er en ikke-relasjonell database (operasjoner via SQL-setninger støttes ikke). Den kan lagre store mengder data, tilby grensesnitt for spørringer og bygge indekser, noe andre lagringsløsninger ikke kan tilby. |
IndexedDB
Denne artikkelen beskriver hovedsakelig bruken av IndexedDB for front-end lagring, og introduseres som følger:
IndexedDB er et underliggende API for lagring av store mengder strukturert data (også fil-/binærstore objekter (blobs)) på klientsiden. API-et bruker indekser for å muliggjøre høyytelsessøk i data. Selv om weblagring er nyttig for å lagre mindre mengder data, er det ikke like bra som å lagre større mengder strukturert data. IndexedDB gir en løsning for dette scenariet. Denne siden er hovedveiledningssiden for MDN IndexedDB – her gir vi en fullstendig API-referanse og bruksguide, informasjon om nettleserstøtte, og lenker til noen forklaringer av nøkkelbegreper.
IndexedDB har følgende funksjoner:
(1) Lagring av nøkkelverdipar. IndexedDB bruker et objektlager for å lagre data. Alle typer data kan deponeres direkte, inkludert JavaScript-objekter. I objektrepositoriet lagres data i form av "nøkkel-verdi-par", og hver datapost har en tilsvarende primærnøkkel, som er unik og ikke kan dupliseres, ellers vil en feil bli kastet.
(2) Asynkron. IndexedDB låser ikke nettleseren, og brukeren kan fortsatt utføre andre operasjoner, i motsetning til LocalStorage, som opererer synkront. Asynkron design er for å forhindre at store mengder data blir lest og skrevet, noe som reduserer ytelsen til nettsider.
(3) Støttesaker. IndexedDB støtter transaksjoner, noe som betyr at hvis ett av operasjonstrinnene feiler, vil hele transaksjonen bli kansellert, og databasen vil bli rullet tilbake til tilstanden før transaksjonen fant sted, og det er ikke tilfelle av å omskrive bare deler av dataene.
(4) Homologirestriksjon. IndexedDB er underlagt samme opprinnelsesgrense, og hver database tilsvarer domenenavnet som opprettet den. Nettsider kan kun få tilgang til databaser under sine egne domenenavn, ikke databaser på tvers av domener.
(5) Stort lagringsrom. IndexedDB har mye større lagringsplass enn LocalStorage, vanligvis ikke mindre enn 250MB, og det finnes ingen øvre grense.
(6) Støtte binær lagring. IndexedDB kan lagre ikke bare strenger, men også binære data (ArrayBuffer-objekter og Blob-objekter).
Hvis det er vanskelig å komme i gang direkte med IndexedDB og du må kapsle det inn selv, kan du bruke noen pakkepakker, som følger:
- localForage: En enkel Polyfill som gir en enkel verdisyntaks for klientside datalagre. Den bruker IndexedDB i bakgrunnen og faller tilbake på WebSQL eller localStorage i nettlesere som ikke støtter IndexedDB.
- Dexie.js: IndexedDBs wrappere tillater raskere kodeutvikling gjennom enkel syntaks.
- ZangoDB: Et IndexedDB-grensesnitt lik MongoDB, som støtter de fleste av MongoDBs kjente filtrerings-, projeksjons-, sorterings-, oppdaterings- og aggregeringsfunksjoner.
- JsStore: En IndexedDB-wrapper med SQL-syntaks.
- MiniMongo: MongoDB i klientminne støttet av lokallagring, serversynkronisering via http. MeteorJS bruker MiniMongo.
- PouchDB: En klient som implementerer CouchDB i nettleseren ved hjelp av IndexedDB.
- idb: Et lite (〜1.15k) bibliotek med mesteparten av API-et likt IndexedDB, men med noen mindre forbedringer som i stor grad forbedrer brukervennligheten til databasen.
- idb-keyval: Superenkel og liten (~600B) løftebasert nøkkel-verdi-parlagring implementert med IndexedDB.
- sifrr-storage: En svært liten (~2 kB) løftebasert klientside-nøkkelverdidatabase. Implementert basert på IndexedDB, localStorage, WebSQL og informasjonskapsler. Den kan automatisk velge de støttede databasene nevnt ovenfor og bruke dem i prioritert rekkefølge.
- lovefield: Lovefield er en relasjonsdatabase for webapplikasjoner, skrevet i JavaScript, kan kjøres i ulike nettlesermiljøer, og tilbyr et SQL-lignende API som er raskt, sikkert og brukervennlig.
lokalForage
localForage er et raskt og enkelt JavaScript-arkiv. localForage forbedrer den offline opplevelsen av webapplikasjoner ved å bruke asynkron lagring (IndexedDB eller WebSQL) og et enkelt API likt localStorage. localForage bruker localStorage i nettlesere som ikke støtter IndexedDB eller WebSQL.
GitHub-adresse:Innloggingen med hyperkoblingen er synlig.
Kinesisk veiledning:Innloggingen med hyperkoblingen er synlig.
localForage tilbyr to forskjellige js-filer, forskjellene er som følger:
localforage.js: et Promise-bibliotek som inneholder lie-implementasjonen (Innloggingen med hyperkoblingen er synlig.), filen er relativt stor, og promise-syntaksen kan brukes i eldre nettlesere.
localforage.nopromises.js: Det finnes ingen implementering av Promise, kun nye versjoner av nettlesere støttes.
Testkode:
(Slutt)
|
Publisert på 12.10.2023 20:42:27
|
|
|
|
Vert|
Publisert på 02.03.2025 19:12:18
|
