Yleisiä front-end-datan tallennusratkaisuja ovat pääasiassa seuraavat:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storagejne., esimerkiksi:
| ominainen | eväste | localStorage | sessionStorage | indexedDB | | Datan elinkaari | Yleensä palvelimen generoima vanhenemisaika voidaan asettaa; Komponentteja, kuten front-endin käyttöönotto ja js-cookie, voidaan myös generoida | Ellei sitä siivota, se on aina siellä; Kun selain suljetaan, se tallennetaan myös paikallisesti, mutta selainten välinen käyttö ei ole tuettu | Sivun puhdistaminen ja päivittäminen säilyy, kun sivu on suljettu, eikä sivujen välinen vuorovaikutus ole tuettu | Ellei sitä siivota, se on aina ollut olemassa | | Tietovaraston koko | 4K | 5M | 5M | Ei kokorajoitusta | | Kommunikoi palvelimen kanssa | Se kuljetetaan pyydetyssä otsikossa joka kerta, mikä vaikuttaa pyynnön suoritukseen; Samaan aikaan, koska se sisältyy pyyntöön, se on altis tietoturvaongelmille | Ei osallistumista | Ei osallistumista | Ei osallistumista | | erikoisuus | Merkkijonon avain-arvoparit tallentavat dataa paikallisesti | Merkkijonon avain-arvoparit tallentavat dataa paikallisesti | Merkkijonon avain-arvoparit tallentavat dataa paikallisesti | IndexedDB on ei-relaatiotietokanta (SQL-lauseiden kautta tehtäviä operaatioita ei tueta). Se voi tallentaa suuria määriä dataa, tarjota rajapintoja kyselyille ja rakentaa indeksejä, joita muut tallennusratkaisut eivät pysty tarjoamaan. |
IndexedDB
Tämä artikkeli kuvaa pääasiassa IndexedDB:n käyttöä etupään tallennuksessa ja esitellään seuraavasti:
IndexedDB on taustalla oleva API, jolla voidaan tallentaa suuria määriä rakenteellista dataa (myös tiedosto- tai binäärisiä suuria objekteja (blobeja)) asiakaspuolelle. API käyttää indeksejä mahdollistaakseen korkean suorituskyvyn datahakuja. Vaikka Web Storage on hyödyllinen pienempien tietomäärien tallentamiseen, se ei ole yhtä hyvä kuin suurempien määrien rakenteellisen datan tallentaminen. IndexedDB tarjoaa ratkaisun tähän tilanteeseen. Tämä sivu on MDN IndexedDB:n pääopas – tässä tarjoamme kattavan API-viite- ja käyttöohjeen, selaimen tukitiedot sekä linkkejä joihinkin keskeisiin käsitteisiin.
IndexedDB:ssä on seuraavat ominaisuudet:
(1) Avain-arvoparien tallennus. IndexedDB käyttää objektivarastoa datan tallentamiseen. Kaikki datatyypit voidaan tallettaa suoraan, mukaan lukien JavaScript-objektit. Objektivarastossa data tallennetaan "avain-arvoparien" muodossa, ja jokaisella tietotietueella on vastaava ensisijainen avain, joka on yksikäsitteinen eikä sitä voi kopioida, muuten virhe syntyy.
(2) Asynkroninen. IndexedDB ei lukitse selainta, ja käyttäjä voi silti suorittaa muita toimintoja, toisin kuin LocalStorage, joka toimii synkronisesti. Asynkronisen suunnittelun tarkoituksena on estää suurten datamäärien lukeminen ja kirjoittaminen, mikä hidastaa verkkosivujen suorituskykyä.
(3) Tukisuhteet. IndexedDB tukee transaktioita, mikä tarkoittaa, että jos jokin operaatiovaihe epäonnistuu, koko tapahtuma peruutetaan ja tietokanta palautetaan tilaan ennen tapahtumaa, eikä ole tapausta, että vain osa datasta kirjoitetaan uudelleen.
(4) Homologian rajoitus. IndexedDB:llä on sama alkuperärajoitus, ja jokainen tietokanta vastaa sen luoneeseen verkkotunnukseen. Verkkosivut voivat käyttää tietokantoja vain omilla verkkotunnaloillaan, eivät eri domaineja sisältäviä tietokantoja.
(5) Suuri säilytystila. IndexedDB:llä on paljon suurempi tallennustila kuin LocalStoragella, yleensä vähintään 250MB, eikä ylärajaa ole.
(6) Tue binääritallennusta. IndexedDB voi tallentaa paitsi merkkijonoja myös binääridataa (ArrayBuffer-objektit ja Blob-objektit).
Jos IndexedDB:llä on vaikea päästä suoraan alkuun ja sinun täytyy kapseloida se itse, voit käyttää joitakin paketoituja paketteja seuraavasti:
- localForage: Yksinkertainen Polyfill, joka tarjoaa yksinkertaisen arvosyntaksin asiakaspuolen tietovarastoille. Se käyttää taustalla IndexedDB:tä ja palaa WebSQL:ään tai localStorageen selaimissa, jotka eivät tue IndexedDB:tä.
- Dexie.js: IndexedDB:n kääreet mahdollistavat nopeamman koodinkehityksen yksinkertaisen syntaksin avulla.
- ZangoDB: IndexedDB:n rajapinta, joka muistuttaa MongoDB:tä ja tukee suurinta osaa MongoDB:n tutuista suodatus-, projektio-, lajittelu-, päivitys- ja aggregaatiotoiminnoista.
- JsStore: IndexedDB-kääre, jossa on SQL-syntaksi.
- MiniMongo: MongoDB asiakasmuistissa, jota tukee paikallinen tallennus, palvelimen synkronointi http:n kautta. MeteorJS käyttää MiniMongoa.
- PouchDB: Asiakasohjelma, joka toteuttaa CouchDB:n selaimessa käyttäen IndexedDB:tä.
- idb: Pieni (〜1,15k) kirjasto, jossa suurin osa API:sta on samankaltainen kuin IndexedDB:ssä, mutta pienillä parannuksilla, jotka parantavat tietokannan käytettävyyttä huomattavasti.
- idb-keyval: Erittäin yksinkertainen ja pieni (~600B) lupauspohjainen avain-arvoparitallennus, toteutettu IndexedDB:llä.
- sifrr-storage: Erittäin pieni (~2kB) lupauspohjainen asiakaspuolen avainarvo-tietokanta. Toteutettu IndexedDB:n, localStoragen, WebSQL:n ja evästeiden pohjalta. Se voi automaattisesti valita yllä mainitut tuetut tietokannat ja käyttää niitä prioriteettijärjestyksessä.
- lovefield: Lovefield on relaatiotietokanta web-sovelluksille, kirjoitettu JavaScriptillä, voi toimia eri selainympäristöissä ja tarjoaa SQL-tyyppisen API:n, joka on nopea, turvallinen ja helppokäyttöinen.
paikallisruoka
localForage on nopea ja yksinkertainen JavaScript-repositorio. localForage parantaa verkkosovellusten offline-käyttökokemusta käyttämällä asynkronista tallennustilaa (IndexedDB tai WebSQL) ja yksinkertaista rajapintaa, joka muistuttaa localStoragea. localForage käyttää localStoragea selaimissa, joissa ei ole IndexedDB- tai WebSQL-tukea.
GitHub-osoite:Hyperlinkin kirjautuminen on näkyvissä.
Kiinan opetus:Hyperlinkin kirjautuminen on näkyvissä.
localForage tarjoaa kaksi erilaista js-tiedostoa, erot ovat seuraavat:
localforage.js: lupauskirjasto, joka sisältää lie-toteutuksen (Hyperlinkin kirjautuminen on näkyvissä.), tiedosto on suhteellisen suuri, ja Promise-syntaksia voi käyttää vanhemmissa selaimissa.
localforage.nopromises.js: Promisea ei ole toteutettu, vain uusia selainversioita tuetaan.
Testikoodi:
(Loppu)
|
Julkaistu 12.10.2023 20.42.27
|
|
|
|
Vuokraisäntä|
Julkaistu 2.3.2025 19.12.18
|
