A gyakori front-end adattárolási megoldások főként a következők:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storagestb., például:
| jellemző | süti | localStorage | sessionStorage | indexedDB | | Az adat életciklusa | Általában a szerver generálja, így a lejárati idő beállítható; Olyan komponensek is generálhatók, mint a front-end elfogadás és a js-cookie | Ha nem takarítják meg, mindig ott van; Amikor a böngésző bezárul, helyben is elmentik, de a böngészők közötti megoldás nem támogatott | Az oldal tisztítása és frissítése továbbra is elérhető lesz, ha az oldal zárva van, és a keresztoldalas interakció nem támogatott | Ha nem tisztítják meg, mindig is létezett | | Adattároló méret | 4K | 5M | 5M | Nincs méretkorlát | | Kommunikálni a szerverrel | Minden alkalommal a kért fejlécben szerepel, ami hatással van a kérés teljesítésére; Ugyanakkor, mivel ez a kérésbe van építve, hajlamos biztonsági problémákra is | Nem vesznek részt | Nem vesznek részt | Nem vesznek részt | | jellemző vonás | A string kulcs-érték párok helyi adatokat tárolnak | A string kulcs-érték párok helyi adatokat tárolnak | A string kulcs-érték párok helyi adatokat tárolnak | Az IndexedDB nem relációs adatbázis (SQL utasításokkal történő műveletek nem támogatottak). Képes nagy mennyiségű adatot tárolni, felületeket biztosítani lekérdezésekhez, és indexeket építeni, amit más tárolómegoldások nem tudnak biztosítani. |
IndexedDB
Ez a cikk főként az IndexedDB front-end tárolásra való használatát mutatja be, és az alábbiakban vezeti be:
Az IndexedDB egy alap API nagy mennyiségű strukturált adat (más is, fájl/bináris nagy objektumok (blobok) tárolására a kliens oldalon. Az API indexeket használ a nagy teljesítményű adatkeresések lehetővé tételére. Bár a Webes Tárolás hasznos kisebb adatmennyiség tárolására, nem olyan jó, mint nagyobb mennyiségű strukturált adat tárolása. Az IndexedDB megoldást kínál erre a helyzetre. Ez az oldal az MDN IndexedDB fő útmutatója – itt teljes API hivatkozási és használati útmutatót, böngészőtámogatási részleteket, valamint kulcsfontosságú fogalmak magyarázatainak linkjeit biztosítjuk.
Az IndexedDB a következő funkciókkal rendelkezik:
(1) Kulcs-érték páros tárolás. Az IndexedDB objektumtárolót használ az adatok tárolására. Minden adattípus közvetlenül behelyezhető, beleértve a JavaScript objektumokat is. Az objektumtárban az adatok "kulcs-érték párok" formájában tárolódnak, és minden adatrekordnak van egy megfelelő elsődleges kulcsa, amely egyedi és nem duplálható, különben hiba keletkezik.
(2) Aszinkron. Az IndexedDB nem zárja le a böngészőt, és a felhasználó továbbra is végrehajthat más műveleteket, ellentétben a LocalStorage-szel, amely szinkronban működik. Az aszinkron tervezés célja, hogy megakadályozza a nagy mennyiségű adat olvasását és írását, ami lassítja a weboldalak teljesítményét.
(3) Támogató ügyek. Az IndexedDB támogatja a tranzakciókat, ami azt jelenti, hogy ha az egyik műveleti lépés sikertelenül működik, az egész tranzakciót törölik, és az adatbázis visszakerül a tranzakció előtti állapotba, és nincs eset, hogy csak az adatok egy részét írják újra.
(4) Homológia korlátozás. Az indexedDB-nek ugyanaz az eredeti korlát vonatkozik, és minden adatbázis megfelel annak a domainnévnek, amely létrehozta. A weboldalak csak saját domain nevük alatt érhetnek hozzáférést adatbázisokhoz, nem a domének közötti adatbázisokhoz.
(5) Nagy tárolóhely. Az IndexedDB sokkal nagyobb tárhelyet kínál, mint a LocalStorage, általában legfeljebb 250MB, és nincs felső korlátja.
(6) Támogatja a bináris tárolást. Az IndexedDB nemcsak stringeket, hanem bináris adatokat is tárolhat (ArrayBuffer objektumok és Blob objektumok).
Ha nehéz közvetlenül elkezdeni az IndexedDB-t, és magadnak kell bekapsulázni, használhatsz néhány csomagolt csomagot, az alábbiak szerint:
- localForage: Egy egyszerű Polyfill, amely egyszerű értékszintaxist biztosít kliensoldali adattárolókhoz. Háttérben az IndexedDB-t használja, és visszatér a WebSQL-re vagy a localStorage-re olyan böngészőkben, amelyek nem támogatják az IndexedDB-t.
- Dexie.js: Az indexedDB burkolói gyorsabb kódfejlesztést tesznek lehetővé egyszerű szintaxissal.
- ZangoDB: Egy IndexedDB felület, amely hasonló a MongoDB-hez, támogatja a MongoDB legtöbb ismerős szűrés-, vetítés-, rendezés-frissítési és aggregációs funkcióit.
- JsStore: Egy IndexedDB wrapper SQL szintaxissal.
- MiniMongo: MongoDB kliensmemóriában támogatott helyi tárolóval, szerver szinkronizációval http segítségével. A MeteorJS MiniMongo rendszert használ.
- PouchDB: Egy kliens, amely a CouchDB-t implementálja a böngészőben az IndexedDB segítségével.
- idb: Egy apró (〜1,15k) könyvtár, amelynek API nagy része hasonló az IndexedDB-hez, de kisebb fejlesztésekkel, amelyek jelentősen javítják az adatbázis használhatóságát.
- idb-keyval: Szuper egyszerű és kicsi (~600B) ígéretalapú kulcs-érték páros tárolás, IndexedDB-vel megvalósítva.
- sifrr-storage: Egy nagyon kis (~2kB) ígéret-alapú kliensoldali kulcs-érték adatbázis. IndexedDB, localStorage, WebSQL és Cookies alapú megvalósítás. Automatikusan ki tudja választani a fent említett támogatott adatbázisokat, és prioritási sorrendben használja őket.
- lovefield: A Lovefield egy relációs adatbázis webalkalmazásokhoz, JavaScript-en írt, különböző böngészőkörnyezetekben futtatható, és SQL-szerű API-t biztosít, amely gyors, biztonságos és könnyen használható.
localForage
a localForage egy gyors és egyszerű JavaScript tároló. a localForage javítja a webalkalmazások offline élményét aszinkron tárolóhely (IndexedDB vagy WebSQL) és egy egyszerű, localStorage-hez hasonló API használatával. localForage olyan böngészőkben használja a localStorage-t, ahol nincs IndexedDB vagy WebSQL támogatás.
GitHub cím:A hiperlink bejelentkezés látható.
Kínai oktató:A hiperlink bejelentkezés látható.
localForage két különböző js fájlt kínál, a különbségek a következők:
localforage.js: egy ígéretkönyvtár, amely tartalmazza a lie implementációt (A hiperlink bejelentkezés látható.), a fájl viszonylag nagy, és a Promise szintaxisa régebbi böngészőkben is használható.
localforage.nopromises.js: Nincs implementáció a Promise-nek, csak új böngészőverziók támogatottak.
Tesztkód:
(Vége)
|
Közzétéve 2023. 10. 12. 20:42:27
|
|
|
|
Háziúr|
Közzétéve 2025. 03. 02. 19:12:18
|
