Veelvoorkomende front-end dataopslagoplossingen omvatten hoofdzakelijk:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageenzovoort, bijvoorbeeld:
| karakteristiek | koekje | localStorage | sessionStorage | indexedDB | | Levenscyclus van gegevens | Doorgaans gegenereerd door de server, kan de vervaltijd worden ingesteld; Componenten zoals front-end adoptie en js-cookie kunnen ook worden gegenereerd | Tenzij het wordt opgeruimd, is het er altijd; Wanneer de browser gesloten is, wordt deze ook lokaal opgeslagen, maar cross-browser wordt niet ondersteund | Het schoonmaken en verversen van de pagina blijft bestaan wanneer de pagina gesloten is, en interactie tussen pagina's wordt niet ondersteund | Tenzij het wordt opgeruimd, heeft het altijd al bestaan | | Grootte van de datawinkel | 4K | 5M | 5M | Geen groottelimiet | | Communiceer met de server | Deze wordt elke keer in de gevraagde header gedragen, wat invloed heeft op de uitvoering van het verzoek; Tegelijkertijd, omdat het in het verzoek is opgenomen, is het ook vatbaar voor beveiligingsproblemen | Niet meedoen | Niet meedoen | Niet meedoen | | eigenaardigheid | String-sleutel-waardeparen slaan gegevens lokaal op | String-sleutel-waardeparen slaan gegevens lokaal op | String-sleutel-waardeparen slaan gegevens lokaal op | IndexedDB is een niet-relationele database (bewerkingen via SQL-instructies worden niet ondersteund). Het kan grote hoeveelheden data opslaan, interfaces bieden om te zoeken en indexen bouwen, wat andere opslagoplossingen niet kunnen bieden. |
IndexedDB
Dit artikel beschrijft voornamelijk het gebruik van IndexedDB voor front-end opslag en wordt als volgt geïntroduceerd:
IndexedDB is een onderliggende API voor het opslaan van grote hoeveelheden gestructureerde data (ook bestand of binaire grote objecten (blobs)) aan de clientzijde. De API gebruikt indexen om krachtige zoekopdrachten naar data mogelijk te maken. Hoewel webopslag nuttig is voor het opslaan van kleinere hoeveelheden data, is het niet zo goed als het opslaan van grotere hoeveelheden gestructureerde data. IndexedDB biedt een oplossing voor dit scenario. Deze pagina is de hoofdgids voor MDN IndexedDB - hier bieden we een volledige API-referentie en gebruiksgids, details over browserondersteuning en links naar enkele uitleg van belangrijke concepten.
IndexedDB heeft de volgende functies:
(1) Sleutelwaarde-paropslag. IndexedDB gebruikt een objectopslag om data op te slaan. Alle soorten data kunnen direct worden gedeponeerd, inclusief JavaScript-objecten. In de objectrepository wordt data opgeslagen in de vorm van "sleutel-waarde paren", en elk datarecord heeft een overeenkomstige primaire sleutel, die uniek is en niet kan worden gedupliceerd, anders wordt er een foutmelding gegeven.
(2) Asynchroon. IndexedDB vergrendelt de browser niet en de gebruiker kan nog steeds andere bewerkingen uitvoeren, in tegenstelling tot LocalStorage dat synchroon werkt. Asynchroon ontwerp is bedoeld om te voorkomen dat grote hoeveelheden data worden gelezen en geschreven, waardoor de prestaties van webpagina's vertragen.
(3) Ondersteuningszaken. IndexedDB ondersteunt transacties, wat betekent dat als een van de bewerkingsstappen faalt, de hele transactie wordt geannuleerd en de database wordt teruggezet naar de staat van vóór de transactie, en dat er geen geval is om slechts een deel van de data te herschrijven.
(4) Homologiebeperking. IndexedDB valt onder dezelfde oorsprongslimiet, en elke database komt overeen met de domeinnaam die het heeft aangemaakt. Webpagina's kunnen alleen databases onder hun eigen domeinnaam benaderen, niet met cross-domain databases.
(5) Grote opslagruimte. IndexedDB heeft een veel grotere opslagruimte dan LocalStorage, meestal niet minder dan 250MB, en er is geen bovengrens.
(6) Ondersteuning voor binaire opslag. IndexedDB kan niet alleen strings opslaan, maar ook binaire gegevens (ArrayBuffer-objecten en Blob-objecten).
Als het lastig is om direct met IndexedDB te beginnen en je het zelf moet encapsulaten, kun je enkele pakketten gebruiken, als volgt:
- localForage: Een eenvoudige Polyfill die een eenvoudige waardesyntaxis biedt voor client-side datastores. Het gebruikt IndexedDB op de achtergrond en valt terug op WebSQL of localStorage in browsers die IndexedDB niet ondersteunen.
- Dexie.js: De wrappers van IndexedDB maken snellere codeontwikkeling mogelijk via eenvoudige syntaxis.
- ZangoDB: Een IndexedDB-interface vergelijkbaar met MongoDB, die de meeste van MongoDB's bekende filter-, projectie-, sorteer-, bijwerk- en aggregatiefuncties ondersteunt.
- JsStore: Een IndexedDB-wrapper met SQL-syntaxis.
- MiniMongo: MongoDB in het clientgeheugen, ondersteund door localstorage, serversynchronisatie via http. MeteorJS gebruikt MiniMongo.
- PouchDB: Een client die CouchDB in de browser implementeert met behulp van IndexedDB.
- idb: Een kleine (〜1.15k) bibliotheek met het grootste deel van de API vergelijkbaar met IndexedDB, maar met enkele kleine verbeteringen die de bruikbaarheid van de database aanzienlijk verbeteren.
- idb-keyval: Super eenvoudige en kleine (~600B) op belofte gebaseerde sleutel-waardepaar opslag geïmplementeerd met IndexedDB.
- sifrr-storage: Een zeer kleine (~2 kB) belofte-gebaseerde client-side key-value database. Geïmplementeerd op basis van IndexedDB, localStorage, WebSQL en cookies. Het kan automatisch de hierboven genoemde ondersteunde databases selecteren en deze op volgorde van prioriteit gebruiken.
- lovefield: Lovefield is een relationele database voor webapplicaties, geschreven in JavaScript, kan in verschillende browseromgevingen draaien en biedt een SQL-achtige API die snel, veilig en gebruiksvriendelijk is.
localForage
localForage is een snelle en eenvoudige JavaScript-repository. localForage verbetert de offline ervaring van webapplicaties door gebruik te maken van asynchrone opslag (IndexedDB of WebSQL) en een eenvoudige API vergelijkbaar met localStorage. localForage gebruikt localStorage in browsers die geen ondersteuning voor IndexedDB of WebSQL hebben.
GitHub-adres:De hyperlink-login is zichtbaar.
Chinese Tutorial:De hyperlink-login is zichtbaar.
localForage biedt twee verschillende js-bestanden, de verschillen zijn als volgt:
localforage.js: een Promise-bibliotheek met de lie-implementatie (De hyperlink-login is zichtbaar.), is het bestand relatief groot, en de promise-syntaxis kan in oudere browsers worden gebruikt.
localforage.nopromises.js: Er is geen implementatie van Promise, alleen nieuwe versies van browsers worden ondersteund.
Testcode:
(Einde)
|
Geplaatst op 12-10-2023 20:42:27
|
|
|
|
Huisbaas|
Geplaatst op 02-03-2025 19:12:18
|
