Soluțiile comune de stocare a datelor front-end includ în principal:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageetc., de exemplu:
| caracteristic | prăjitură | localStorage | sessionStorage | indexedDB | | Ciclul de viață al datelor | În general, generat de server, timpul de expirare poate fi setat; Pot fi generate și componente precum adoptarea front-end și js-cookie | Dacă nu este curățat, este mereu acolo; Când browserul este închis, acesta este salvat și local, dar nu este suportat cross-browser | Curățarea și reîmprospătarea paginii vor exista în continuare când pagina este închisă, iar interacțiunea între pagini nu este suportată | Dacă nu a fost curățat, a existat mereu | | Dimensiunea stocului de date | 4K | 5M | 5M | Fără limită de mărime | | Comunică cu serverul | Aceasta este prezentată în antetul solicitat de fiecare dată, ceea ce are un impact asupra performanței cererii; În același timp, deoarece este inclus în cerere, este predispus și la probleme de securitate | Nu particip | Nu particip | Nu particip | | Particularitate | Perechile cheie-valoare de șir stochează datele local | Perechile cheie-valoare de șir stochează datele local | Perechile cheie-valoare de șir stochează datele local | IndexedDB este o bază de date nerelațională (operațiile prin instrucțiuni SQL nu sunt suportate). Poate stoca cantități mari de date, poate oferi interfețe pentru interogări și poate construi indexuri, pe care alte soluții de stocare nu le pot furniza. |
IndexedDB
Acest articol descrie în principal utilizarea IndexedDB pentru stocarea front-end și este introdus astfel:
IndexedDB este un API de bază pentru stocarea unor cantități mari de date structurate (de asemenea, obiecte mari de fișiere/binare (blobs)) pe partea clientului. API-ul folosește indici pentru a permite căutări de înaltă performanță ale datelor. Deși Web Storage este utilă pentru stocarea unor cantități mai mici de date, nu este la fel de bună ca stocarea unor cantități mai mari de date structurate. IndexedDB oferă o soluție pentru acest scenariu. Această pagină este pagina principală de ghid pentru MDN IndexedDB - aici oferim un ghid complet de referință și utilizare API, detalii pentru suportul browserului și linkuri către câteva explicații ale conceptelor cheie.
IndexedDB are următoarele caracteristici:
(1) Stocarea perechii cheie-valoare. IndexedDB folosește un object store pentru a stoca datele. Toate tipurile de date pot fi depuse direct, inclusiv obiectele JavaScript. În depozitul de obiecte, datele sunt stocate sub forma unor "perechi cheie-valoare", iar fiecare înregistrare de date are o cheie primară corespunzătoare, care este unică și nu poate fi duplicată, altfel va apărea o eroare.
(2) Asincron. IndexedDB nu blochează browserul, iar utilizatorul poate efectua în continuare alte operații, spre deosebire de LocalStorage, care funcționează sincron. Designul asincron are scopul de a preveni citirea și scrierea unor cantități mari de date, încetinind performanța paginilor web.
(3) Sprijinirea afacerilor. IndexedDB suportă tranzacții, ceea ce înseamnă că, dacă unul dintre pașii operaționali eșuează, întreaga tranzacție va fi anulată, iar baza de date va fi readusă la starea anterioară tranzacției, fără ca o parte din date să fie rescrisă.
(4) Restricția de omologie. IndexedDB este supus aceleiași limite de origine, iar fiecare bază de date corespunde domeniului care a creat-o. Paginile web pot accesa doar baze de date sub propriile domenii, nu bazele de date cross-domain.
(5) Spațiu mare de depozitare. IndexedDB are un spațiu de stocare mult mai mare decât LocalStorage, în general nu mai puțin de 250MB, și nu există o limită superioară.
(6) Susține stocarea binară. IndexedDB poate stoca nu doar șiruri, ci și date binare (obiecte ArrayBuffer și obiecte Blob).
Dacă este dificil să începi direct cu IndexedDB și trebuie să-l încapsulezi singur, poți folosi câteva pachete ambalate, după cum urmează:
- localForage: Un Polyfill simplu care oferă o sintaxă simplă a valorii pentru depozitele de date de pe partea clientului. Folosește IndexedDB în fundal și revine la WebSQL sau localStorage în browserele care nu suportă IndexedDB.
- Dexie.js: Wrapper-urile IndexedDB permit o dezvoltare mai rapidă a codului printr-o sintaxă simplă.
- ZangoDB: O interfață IndexedDB similară cu MongoDB, care suportă majoritatea funcțiilor familiare de filtrare, proiecție, sortare, actualizare și agregare ale MongoDB.
- JsStore: Un wrapper IndexedDB cu sintaxă SQL.
- MiniMongo: MongoDB în memoria clientului, suportat de localstorage, sincronizarea serverului prin http. MeteorJS folosește MiniMongo.
- PouchDB: Un client care implementează CouchDB în browser folosind IndexedDB.
- idb: O bibliotecă mică (〜1.15k) cu cea mai mare parte a API-ului similară cu IndexedDB, dar cu unele îmbunătățiri minore care îmbunătățesc considerabil uzabilitatea bazei de date.
- idb-keyval: Stocare super simplă și mică (~600B) bazată pe promisiuni pentru perechi cheie-valoare, implementată cu IndexedDB.
- sifrr-storage: O bază de date cheie-valoare foarte mică (~2kB) bazată pe promisiuni, pe partea clientului. Implementat pe baza IndexedDB, localStorage, WebSQL și Cookies. Poate selecta automat bazele de date suportate menționate mai sus și le poate folosi în ordinea priorității.
- lovefield: Lovefield este o bază de date relațională pentru aplicații web, scrisă în JavaScript, poate rula în diferite medii de browser și oferă un API asemănător SQL, rapid, sigur și ușor de folosit.
localFuraje
localForage este un depozit JavaScript rapid și simplu. localForage îmbunătățește experiența offline a aplicațiilor web prin utilizarea stocării asincre (IndexedDB sau WebSQL) și a unui API simplu similar cu localStorage. localForage folosește localStorage în browsere care nu au suport pentru IndexedDB sau WebSQL.
Adresă GitHub:Autentificarea cu hyperlink este vizibilă.
Tutorial de chineză:Autentificarea cu hyperlink este vizibilă.
localForage oferă două fișiere js diferite, diferențele fiind următoarele:
localforage.js: o bibliotecă Promise care conține implementarea lie (Autentificarea cu hyperlink este vizibilă.), fișierul este relativ mare, iar sintaxa promise poate fi folosită în browserele mai vechi.
localforage.nopromises.js: Nu există implementare a Promise, sunt suportate doar versiuni noi de browsere.
Cod de test:
(Sfârșit)
|
Postat pe 12.10.2023 20:42:27
|
|
|
|
Proprietarul|
Postat pe 02.03.2025 19:12:18
|
