Le soluzioni comuni di archiviazione dati front-end includono principalmente:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageecc., ad esempio:
| caratteristico | biscotto | localStorage | sessionStorage | indexedDB | | Ciclo di vita dei dati | Generalmente generati dal server, il tempo di scadenza può essere impostato; Possono essere generati anche componenti come l'adozione front-end e js-cookie | A meno che non venga ripulita, è sempre lì; Quando il browser è chiuso, viene anche salvato localmente, ma non è supportato il cross-browser | La pulizia e l'aggiornamento della pagina saranno comunque disponibili anche quando la pagina sarà chiusa, e l'interazione tra le pagine non è supportata | A meno che non venga ripulita, è sempre esistita | | Dimensione del deposito dati | 4K | 5M | 5M | Nessun limite di dimensione | | Comunica con il server | Viene sempre riportato nell'intestazione richiesta, il che influisce sull'esecuzione della richiesta; Allo stesso tempo, poiché è incluso nella richiesta, è anche soggetto a problemi di sicurezza | Non partecipare | Non partecipare | Non partecipare | | peculiarità | Le coppie chiave-valore stringhe memorizzano i dati localmente | Le coppie chiave-valore stringhe memorizzano i dati localmente | Le coppie chiave-valore stringhe memorizzano i dati localmente | IndexedDB è un database non relazionale (le operazioni tramite istruzioni SQL non sono supportate). Può memorizzare grandi quantità di dati, fornire interfacce per interrogare e costruire indici, che altre soluzioni di archiviazione non possono fornire. |
IndexedDB
Questo articolo descrive principalmente l'uso di IndexedDB per lo storage front-end, ed è introdotto come segue:
IndexedDB è un'API sottostante per memorizzare grandi quantità di dati strutturati (anche file o oggetti binari di grandi dimensioni (blob)) lato client. L'API utilizza indici per consentire ricerche ad alte prestazioni dei dati. Sebbene lo Storage Web sia utile per memorizzare piccole quantità di dati, non è efficace quanto memorizzare grandi quantità di dati strutturati. IndexedDB fornisce una soluzione per questo scenario. Questa pagina è la guida principale per MDN IndexedDB - qui forniamo un riferimento completo dell'API e una guida all'uso, dettagli sul supporto del browser e link ad alcune spiegazioni di concetti chiave.
IndexedDB offre le seguenti funzionalità:
(1) Archiviazione delle coppie chiave-valore. IndexedDB utilizza uno storage oggetti per memorizzare i dati. Tutti i tipi di dati possono essere depositati direttamente, inclusi gli oggetti JavaScript. Nel repository oggetti, i dati sono memorizzati sotto forma di "coppie chiave-valore", e ogni record dati ha una chiave primaria corrispondente, unica e non può essere duplicata, altrimenti verrà generato un errore.
(2) Asincrono. IndexedDB non blocca il browser e l'utente può comunque eseguire altre operazioni, a differenza di LocalStorage, che opera in modo sincrono. Il design asincrono serve a prevenire la lettura e la scrittura di grandi quantità di dati, rallentando le prestazioni delle pagine web.
(3) Sostenere gli affari. IndexedDB supporta le transazioni, il che significa che se uno dei passaggi operativi fallisce, l'intera transazione verrà annullata e il database verrà riportato allo stato precedente all'avvenuto della transazione, senza che si debba riscrivere solo una parte dei dati.
(4) Restrizione di omologia. IndexedDB è soggetto allo stesso limite di origine, e ogni database corrisponde al nome di dominio che lo ha creato. Le pagine web possono accedere solo a database con nomi di dominio propri, non a database cross-domain.
(5) Grande spazio di stoccaggio. IndexedDB ha uno spazio di archiviazione molto più ampio rispetto a LocalStorage, generalmente non meno di 250MB, e non esiste un limite superiore.
(6) Supportare la memoria binaria. IndexedDB può memorizzare non solo stringhe ma anche dati binari (oggetti ArrayBuffer e oggetti Blob).
Se è difficile iniziare direttamente con IndexedDB e devi incapsularlo da solo, puoi usare alcuni pacchetti confezionati, come segue:
- localForage: Un semplice Polyfill che fornisce una sintassi di valore semplice per i dati lato client. Utilizza IndexedDB in background e torna a WebSQL o localStorage nei browser che non supportano IndexedDB.
- Dexie.js: Gli involucri di IndexedDB permettono uno sviluppo più rapido del codice grazie a una sintassi semplice.
- ZangoDB: un'interfaccia IndexedDB simile a MongoDB, che supporta la maggior parte delle funzioni familiari di filtraggio, proiezione, ordinamento, aggiornamento e aggregazione di MongoDB.
- JsStore: Un wrapper IndexedDB con sintassi SQL.
- MiniMongo: MongoDB nella memoria client supportata da localstorage, sincronizzazione server tramite http. MeteorJS usa MiniMongo.
- PouchDB: Un client che implementa CouchDB nel browser usando IndexedDB.
- idb: Una piccola libreria (〜1.15k) con la maggior parte dell'API simile a IndexedDB, ma con alcuni miglioramenti minori che migliorano notevolmente l'usabilità del database.
- idb-keyval: Storage chiave-valore basato su promesse super semplice e piccolo (~600B) implementato con IndexedDB.
- sifrr-storage: Un database key-value lato client basato su promesse molto piccolo (~2kB). Implementato basandosi su IndexedDB, localStorage, WebSQL e Cookie. Può selezionare automaticamente i database supportati sopra menzionati e usarli in ordine di priorità.
- lovefield: Lovefield è un database relazionale per applicazioni web, scritto in JavaScript, può funzionare in diversi ambienti browser e fornisce un'API simile a SQL che è veloce, sicura e facile da usare.
locale Forage
localForage è un repository JavaScript veloce e semplice. localForage migliora l'esperienza offline delle applicazioni web utilizzando lo storage asincrono (IndexedDB o WebSQL) e un'API semplice simile a localStorage. localForage utilizza localStorage in browser che non supportano IndexedDB o WebSQL.
Indirizzo GitHub:Il login del link ipertestuale è visibile.
Tutorial di cinese:Il login del link ipertestuale è visibile.
localForage fornisce due diversi file js, le differenze sono le seguenti:
localforage.js: una libreria Promise contenente l'implementazione lie (Il login del link ipertestuale è visibile.), il file è relativamente grande e la sintassi promise può essere utilizzata in browser più vecchi.
localforage.nopromises.js: Non c'è alcuna implementazione di Promise, sono supportate solo nuove versioni dei browser.
Codice di test:
(Fine)
|
Pubblicato su 12/10/2023 20:42:27
|
|
|
|
Padrone di casa|
Pubblicato su 02/03/2025 19:12:18
|
