En quoi localStorage est-il différent de indexedDB?
108
localStorage et indexedDB sont utilisés pour le stockage hors ligne de données au format HTML5. Quelles sont leurs principales différences et laquelle est préférable dans quelles situations?
Électeurs proches: Bien que je comprenne parfaitement à quel point cela semblait "essentiellement fondé sur l'opinion" (le "vs" dans la version originale n'a pas aidé), les deux technologies sont nettement différentes et il existe des raisons objectives de choisir l'une plutôt que l'autre. user221287 faire quelques recherches préalables minimales sur le sujet de la question et acquérir une compréhension de base des concepts en jeu avant de poser vos questions vous évitera très probablement des votes négatifs et des votes rapprochés à l'avenir.
Yannis
Vous pouvez tester les performances parmi différentes options de stockage et sur différents navigateurs ici: nolanlawson.github.io/database-comparison (crédits de Nolan Lawson)
Lucas Basquerotto
Réponses:
121
En surface, les deux technologies peuvent sembler directement comparables, mais si vous passez du temps avec elles, vous vous rendrez vite compte qu'elles ne le sont pas. Ils ont été conçus pour atteindre un objectif similaire, le stockage côté client, mais ils abordent la tâche du point de vue de points de vue très différents et fonctionnent mieux avec différentes quantités de données.
localStorage, ou plus précisément Web Storage , a été conçu pour de plus petites quantités de données. Il s’agit essentiellement d’un stockage de valeur-clé composé uniquement de chaînes , avec une API synchrone simpliste . Cette dernière partie est la clé. Bien que rien dans la spécification n'interdit un stockage DOM asynchrone, toutes les implémentations sont actuellement synchrones (c'est-à-dire, les demandes de blocage). Même si cela ne vous dérange pas d'utiliser une clé naïve - une valeur de stockage pour de plus grandes quantités de données, vos clients voudront bien attendre le chargement de votre application.
indexedDB , d’autre part, a été conçu pour fonctionner avec des quantités de données beaucoup plus grandes. Premièrement, en théorie, il fournit une API synchrone et asynchrone. En pratique, toutefois, toutes les implémentations actuelles sont asynchrones et les requêtes ne bloqueront pas le chargement de l'interface utilisateur. De plus, indexedDB, comme son nom l'indique, fournit des index . Vous pouvez exécuter des requêtes rudimentaires sur votre base de données et récupérer des enregistrements en recherchant leurs clés dans des plages de clés spécifiques . indexedDB prend également en charge les transactions et fournit des types simples (par exemple, Date).
À ce stade, indexedDB peut sembler être la solution supérieure pour toutes les situations. Cependant, toutes ses fonctionnalités sont pénalisées: comparée au stockage DOM, son API est assez compliquée. indexedDB suppose une connaissance générale des concepts de base de données, alors qu'avec le stockage Web, vous pouvez y accéder directement. Si vous avez déjà travaillé avec des cookies, vous n'aurez aucun problème à utiliser le stockage Web. En outre, en général, vous aurez besoin d'écrire plus de code dans indexedDB pour obtenir exactement le même résultat que dans le stockage Web (et plus de code = plus de bogues). De plus, l’émulation de Web Storage pour les navigateurs qui ne le prennent pas en charge est relativement simple. Avec indexedDB, la tâche ne vaudrait pas la peine. Enfin, avant de vous plonger dans indexedDB, vous devez d'abord jeter un coup d'œil à l' API Quota .
En fin de compte, c'est à vous de choisir si vous utilisez Web Storage ou indexedDB, ou les deux, dans votre application. Un bon cas d'utilisation de Web Storage serait de stocker des données de session simples, par exemple le nom d'un utilisateur, et de vous enregistrer certaines requêtes dans votre base de données réelle. Les fonctionnalités supplémentaires d’indexedDB, en revanche, pourraient vous aider à stocker toutes les données dont vous avez besoin pour que votre application fonctionne en mode hors connexion.
De plus, les employés de service peuvent utiliser la base de données indexée mais pas la
mémoire locale
10
La réponse de @yannis est excellente. Je veux juste ajouter quelques choses.
Dans quelques situations, comme Service Workers, vous ne pouvez pas utiliser de code de blocage. Par conséquent, vous ne pouvez pas utiliser localStorage et vous devez utiliser quelque chose comme indexedDB.
L'API pour indexedDB est complexe et fastidieux (j'irais même jusqu'à dire "horrible", YMMV). Il existe plusieurs bibliothèques "wrapper" pour simplifier l'API, je vous suggère fortement de les consulter.
re ne peut pas utiliser localStorage et le code de blocage, ne pourriez-vous pas envelopper le code de blocage avec une promesse et le rendre non bloquant?
Joedotnot
3
Pour ma part, j'ai constaté que je pouvais stocker des blobs dans IndexedDB, alors que je ne pouvais stocker que des chaînes dans localStorage. Cela signifie que IndexdDB est meilleur pour les données binaires telles que les images, l’audio et la vidéo. Oui, nous pouvons stocker des images en base64 dans le stockage local, mais les blobs seront plus petits et plus rapides car nous n’avons pas besoin de les décoder.
Any objects supported by the structured clone algorithm can be stored:
All primitive types However not symbols
Boolean object
String object
Date
RegExp The lastIndex field is not preserved.
Blob
File
FileList
ArrayBuffer
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData
Array
Object This just includes plain objects (e.g. from object literals)
Map
Set
Réponses:
En surface, les deux technologies peuvent sembler directement comparables, mais si vous passez du temps avec elles, vous vous rendrez vite compte qu'elles ne le sont pas. Ils ont été conçus pour atteindre un objectif similaire, le stockage côté client, mais ils abordent la tâche du point de vue de points de vue très différents et fonctionnent mieux avec différentes quantités de données.
localStorage, ou plus précisément Web Storage , a été conçu pour de plus petites quantités de données. Il s’agit essentiellement d’un stockage de valeur-clé composé uniquement de chaînes , avec une API synchrone simpliste . Cette dernière partie est la clé. Bien que rien dans la spécification n'interdit un stockage DOM asynchrone, toutes les implémentations sont actuellement synchrones (c'est-à-dire, les demandes de blocage). Même si cela ne vous dérange pas d'utiliser une clé naïve - une valeur de stockage pour de plus grandes quantités de données, vos clients voudront bien attendre le chargement de votre application.
indexedDB , d’autre part, a été conçu pour fonctionner avec des quantités de données beaucoup plus grandes. Premièrement, en théorie, il fournit une API synchrone et asynchrone. En pratique, toutefois, toutes les implémentations actuelles sont asynchrones et les requêtes ne bloqueront pas le chargement de l'interface utilisateur. De plus, indexedDB, comme son nom l'indique, fournit des index . Vous pouvez exécuter des requêtes rudimentaires sur votre base de données et récupérer des enregistrements en recherchant leurs clés dans des plages de clés spécifiques . indexedDB prend également en charge les transactions et fournit des types simples (par exemple, Date).
À ce stade, indexedDB peut sembler être la solution supérieure pour toutes les situations. Cependant, toutes ses fonctionnalités sont pénalisées: comparée au stockage DOM, son API est assez compliquée. indexedDB suppose une connaissance générale des concepts de base de données, alors qu'avec le stockage Web, vous pouvez y accéder directement. Si vous avez déjà travaillé avec des cookies, vous n'aurez aucun problème à utiliser le stockage Web. En outre, en général, vous aurez besoin d'écrire plus de code dans indexedDB pour obtenir exactement le même résultat que dans le stockage Web (et plus de code = plus de bogues). De plus, l’émulation de Web Storage pour les navigateurs qui ne le prennent pas en charge est relativement simple. Avec indexedDB, la tâche ne vaudrait pas la peine. Enfin, avant de vous plonger dans indexedDB, vous devez d'abord jeter un coup d'œil à l' API Quota .
En fin de compte, c'est à vous de choisir si vous utilisez Web Storage ou indexedDB, ou les deux, dans votre application. Un bon cas d'utilisation de Web Storage serait de stocker des données de session simples, par exemple le nom d'un utilisateur, et de vous enregistrer certaines requêtes dans votre base de données réelle. Les fonctionnalités supplémentaires d’indexedDB, en revanche, pourraient vous aider à stocker toutes les données dont vous avez besoin pour que votre application fonctionne en mode hors connexion.
la source
La réponse de @yannis est excellente. Je veux juste ajouter quelques choses.
Dans quelques situations, comme Service Workers, vous ne pouvez pas utiliser de code de blocage. Par conséquent, vous ne pouvez pas utiliser localStorage et vous devez utiliser quelque chose comme indexedDB.
L'API pour indexedDB est complexe et fastidieux (j'irais même jusqu'à dire "horrible", YMMV). Il existe plusieurs bibliothèques "wrapper" pour simplifier l'API, je vous suggère fortement de les consulter.
la source
Pour ma part, j'ai constaté que je pouvais stocker des blobs dans IndexedDB, alors que je ne pouvais stocker que des chaînes dans localStorage. Cela signifie que IndexdDB est meilleur pour les données binaires telles que les images, l’audio et la vidéo. Oui, nous pouvons stocker des images en base64 dans le stockage local, mais les blobs seront plus petits et plus rapides car nous n’avons pas besoin de les décoder.
Citation de MDN :
À propos de IndexedDB :
la source