Les solutions courantes de stockage de données front-end incluent principalement :Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageetc., par exemple :
| caractéristique | biscuit | localStorage | sessionStorage | indexedDB | | Cycle de vie des données | Généré généralement par le serveur, le temps d’expiration peut être fixé ; Des composants tels que l’adoption front-end et js-cookie peuvent également être générés | À moins d’être nettoyé, il est toujours là ; Lorsque le navigateur est fermé, il est également enregistré localement, mais la multi-navigation n’est pas prise en charge | Le nettoyage et le rafraîchissement de la page existeront toujours une fois la page fermée, et l’interaction inter-page n’est pas prise en charge | À moins d’être nettoyée, elle a toujours existé | | Taille du magasin de données | 4K | 5M | 5M | Pas de limite de taille | | Communiquez avec le serveur | Il est intégré à chaque fois dans l’en-tête demandé, ce qui a un impact sur la performance de la requête ; En même temps, parce qu’elle est incluse dans la requête, elle est également sujette à des problèmes de sécurité | Ne pas participer | Ne pas participer | Ne pas participer | | particularité | Les paires clé-valeur de chaîne stockent les données localement | Les paires clé-valeur de chaîne stockent les données localement | Les paires clé-valeur de chaîne stockent les données localement | IndexedDB est une base de données non relationnelle (les opérations via les instructions SQL ne sont pas prises en charge). Il peut stocker de grandes quantités de données, fournir des interfaces pour interroger et construire des index, ce que d’autres solutions de stockage ne peuvent fournir. |
IndexedDB
Cet article décrit principalement l’utilisation d’IndexedDB pour le stockage front-end, et est présenté comme suit :
IndexedDB est une API sous-jacente pour stocker de grandes quantités de données structurées (également des fichiers ou objets binaires gros (blobs)) côté client. L’API utilise des index pour permettre des recherches de données à haute performance. Bien que le stockage Web soit utile pour stocker de plus petites quantités de données, il n’est pas aussi efficace que de stocker de plus grandes quantités de données structurées. IndexedDB propose une solution à ce scénario. Cette page est la page principale du guide MDN IndexedDB - ici, nous fournissons une référence complète de l’API et un guide d’utilisation, des détails sur le support du navigateur, ainsi que des liens vers certaines explications de concepts clés.
IndexedDB propose les fonctionnalités suivantes :
(1) Stockage par paires clé-valeur. IndexedDB utilise un stockage d’objets pour stocker les données. Tous les types de données peuvent être déposés directement, y compris les objets JavaScript. Dans le dépôt d’objets, les données sont stockées sous forme de « paires clé-valeur », et chaque enregistrement de données possède une clé primaire correspondante, unique et ne peut être dupliquée, sinon une erreur sera lancée.
(2) Asynchrone. IndexedDB ne verrouille pas le navigateur et l’utilisateur peut toujours effectuer d’autres opérations, contrairement à LocalStorage, qui fonctionne de manière synchrone. La conception asynchrone vise à empêcher la lecture et l’écriture de grandes quantités de données, ce qui ralentit la performance des pages web.
(3) Soutenir les affaires. IndexedDB prend en charge les transactions, ce qui signifie que si l’une des étapes de l’opération échoue, la transaction entière sera annulée, et la base de données sera reconvertie à l’état précédent de la transaction, sans qu’il n’y ait aucun cas de réécriture d’une partie des données.
(4) Restriction d’homologie. IndexedDB est soumis à la même limite d’origine, et chaque base de données correspond au nom de domaine qui l’a créée. Les pages web ne peuvent accéder qu’aux bases de données sous leur propre nom de domaine, et non aux bases de données inter-domaines.
(5) Grand espace de rangement. IndexedDB dispose d’un espace de stockage bien plus grand que LocalStorage, généralement pas moins de 250 Mo, et il n’y a pas de limite supérieure.
(6) Prendre en charge le stockage binaire. IndexedDB peut stocker non seulement des chaînes de caractères mais aussi des données binaires (objets ArrayBuffer et objets Blob).
Si il est difficile de commencer directement avec IndexedDB et que vous devez l’encapsuler vous-même, vous pouvez utiliser certains paquets empaquetés, comme suit :
- localForage : Un Polyfill simple qui fournit une syntaxe de valeur simple pour les archives de données côté client. Il utilise IndexedDB en arrière-plan et revient à WebSQL ou localStorage dans les navigateurs qui ne prennent pas en charge IndexedDB.
- Dexie.js : Les wrappers d’IndexedDB permettent un développement de code plus rapide grâce à une syntaxe simple.
- ZangoDB : Une interface IndexedDB similaire à MongoDB, prenant en charge la plupart des fonctions familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
- JsStore : Un wrapper IndexedDB avec une syntaxe SQL.
- MiniMongo : MongoDB en mémoire client supporté par localstorage, synchronisation serveur via http. MeteorJS utilise MiniMongo.
- PouchDB : Un client qui implémente CouchDB dans le navigateur via IndexedDB.
- idb : Une toute petite bibliothèque (〜1.15k) avec la majeure partie de l’API similaire à IndexedDB, mais avec quelques améliorations mineures qui améliorent grandement l’utilisabilité de la base de données.
- idb-keyval : Stockage par paires clé-valeur basé sur la promesse très simple et petit (~600B) implémenté avec IndexedDB.
- sifrr-storage : Une très petite base de données clé-valeur côté client basée sur des promesses. Implémenté basé sur IndexedDB, localStorage, WebSQL et Cookies. Il peut sélectionner automatiquement les bases de données prises en charge mentionnées ci-dessus et les utiliser par ordre de priorité.
- lovefield : Lovefield est une base de données relationnelle pour applications web, écrite en JavaScript, peut fonctionner dans différents environnements de navigateur, et offre une API de type SQL rapide, sécurisée et facile à utiliser.
localForage
localForage est un dépôt JavaScript rapide et simple. localForage améliore l’expérience hors ligne des applications web en utilisant un stockage asynchrone (IndexedDB ou WebSQL) et une API simple similaire à localStorage. localForage utilise localStorage dans des navigateurs qui ne prennent pas en charge IndexedDB ou WebSQL.
Adresse GitHub :La connexion hyperlientérée est visible.
Tutoriel de chinois :La connexion hyperlientérée est visible.
localForage propose deux fichiers js différents, les différences sont les suivantes :
localforage.js: une bibliothèque Promise contenant l’implémentation de lie (La connexion hyperlientérée est visible.), le fichier est relativement volumineux, et la syntaxe promise peut être utilisée dans les navigateurs plus anciens.
localforage.nopromises.js: Il n’y a pas d’implémentation de Promise, seules les nouvelles versions des navigateurs sont prises en charge.
Code de test :
(Fin)
|
Publié sur 12/10/2023 20:42:27
|
|
|
|
Propriétaire|
Publié sur 02/03/2025 19:12:18
|
