You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 6-data-storage/03-indexeddb/article.md
+1-65Lines changed: 1 addition & 65 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -196,19 +196,11 @@ Une clé doit être de l'un de ces types : nombre, date, chaîne, binaire ou ta
196
196
197
197

198
198
199
-
<<<<<<< HEAD
200
199
Comme nous le verrons très bientôt, nous pouvons fournir une clé lorsque nous ajoutons une valeur au magasin, similaire à `localStorage`. Mais lorsque nous stockons des objets, IndexedDB permet de configurer une propriété d'objet comme clé, ce qui est beaucoup plus pratique. Ou nous pouvons générer automatiquement des clés.
201
200
202
201
Mais nous devons d'abord créer un magasin d'objets.
203
202
204
203
La syntaxe pour créer un magasin d'objets :
205
-
=======
206
-
As we'll see very soon, we can provide a key when we add a value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows setting up an object property as the key, which is much more convenient. Or we can auto-generate keys.
207
-
208
-
But we need to create an object store first.
209
-
210
-
The syntax to create an object store:
211
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
212
204
213
205
```js
214
206
db.createObjectStore(name, keyOptions);
@@ -225,11 +217,6 @@ Si nous ne fournissons pas `keyOptions`, nous devrons fournir une clé explicite
225
217
226
218
Par exemple, ce magasin d'objets utilise la propriété `id` comme clé :
227
219
228
-
<<<<<<< HEAD
229
-
=======
230
-
For instance, this object store uses `id` property as the key:
231
-
232
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
233
220
```js
234
221
db.createObjectStore('books', {keyPath:'id'});
235
222
```
@@ -240,15 +227,8 @@ C'est une limitation technique. En dehors du gestionnaire, nous pourrons ajouter
240
227
241
228
Pour effectuer une mise à niveau de version de base de données, il existe deux approches principales :
242
229
243
-
<<<<<<< HEAD
244
230
1. Nous pouvons implémenter des fonctions de mise à niveau par version : de 1 à 2, de 2 à 3, de 3 à 4, etc. Ensuite, dans `upgradeneeded`, nous pouvons comparer les versions (par exemple, l'ancienne 2, maintenant la 4) et exécuter des mises à niveau par version étape par étape, pour chaque version intermédiaire (2 à 3, puis 3 à 4).
245
231
2. Ou nous pouvons simplement examiner la base de données : obtenez une liste des magasins d'objets existants sous le nom `db.objectStoreNames`. Cet objet est une [DOMStringList](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#domstringlist) qui fournit la méthode `contains(name)` pour vérifier l'existence. Et puis nous pouvons faire des mises à jour en fonction de ce qui existe et de ce qui n'existe pas.
246
-
=======
247
-
To perform a database version upgrade, there are two main approaches:
248
-
249
-
1. We can implement per-version upgrade functions: from 1 to 2, from 2 to 3, from 3 to 4 etc. Then, in `upgradeneeded` we can compare versions (e.g. old 2, now 4) and run per-version upgrades step by step, for every intermediate version (2 to 3, then 3 to 4).
250
-
2. Or we can just examine the database: get a list of existing object stores as `db.objectStoreNames`. That object is a [DOMStringList](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#domstringlist) that provides `contains(name)` method to check for existance. And then we can do updates depending on what exists and what doesn't.
251
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
252
232
253
233
Pour les petites bases de données, la deuxième variante peut être plus simple.
@@ -285,15 +261,8 @@ Une transaction est un groupe d'opérations qui doivent toutes réussir ou toute
285
261
286
262
Par exemple, lorsqu'une personne achète quelque chose, nous devons :
287
263
288
-
<<<<<<< HEAD
289
264
1. Soustrayez l'argent de leur compte.
290
265
2. Ajoutez l'objet à son inventaire.
291
-
=======
292
-
For instance, when a person buys something, we need to:
293
-
294
-
1. Subtract the money from their account.
295
-
2. Add the item to their inventory.
296
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
297
266
298
267
Ce serait plutôt mauvais si nous terminions la 1ère opération, puis quelque chose ne va pas, par ex. les lumières s'éteignent, et nous ne parvenons pas à faire le 2ème. Les deux doivent soit réussir (achat terminé, bon !) soit échouer (au moins la personne a gardé son argent, elle peut donc réessayer).
299
268
@@ -312,11 +281,7 @@ db.transaction(store, type);
312
281
-`readonly` -- peut uniquement lire, la valeur par défaut.
313
282
-`readwrite` -- ne peut que lire et écrire les données, mais pas créer/supprimer/modifier les magasins d'objets.
314
283
315
-
<<<<<<< HEAD
316
-
Il y a aussi le type de transaction `versionchange` : ces transactions peuvent tout faire, mais nous ne pouvons pas les créer manuellement. IndexedDB crée automatiquement une transaction `versionchange` lors de l'ouverture de la base de données, pour le gestionnaire `updateneeded`. C'est pourquoi c'est un endroit unique où nous pouvons mettre à jour la structure de la base de données, créer/supprimer des magasins d'objets.
317
-
=======
318
-
There's also `versionchange` transaction type: such transactions can do everything, but we can't create them manually. IndexedDB automatically creates a `versionchange` transaction when opening the database, for `upgradeneeded` handler. That's why it's a single place where we can update the database structure, create/remove object stores.
319
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
284
+
Il y a aussi le type de transaction `versionchange` : ces transactions peuvent tout faire, mais nous ne pouvons pas les créer manuellement. IndexedDB crée automatiquement une transaction `versionchange` lors de l'ouverture de la base de données, pour le gestionnaire `upgradeneeded`. C'est pourquoi c'est un endroit unique où nous pouvons mettre à jour la structure de la base de données, créer/supprimer des magasins d'objets.
320
285
321
286
```smart header="Pourquoi existe-t-il différents types de transactions ?"
322
287
La performance est la raison pour laquelle les transactions doivent être étiquetées `readonly` et `readwrite`.
@@ -654,11 +619,6 @@ La méthode `delete` recherche les valeurs à supprimer par une requête, le for
Comme nous le savons déjà, une transaction s'auto-valide dès que le navigateur a terminé avec le code et les microtâches actuels. Donc, si nous plaçons une *macrotask* comme `fetch` au milieu d'une transaction, alors la transaction n'attendra pas qu'elle se termine. Il s'auto-valide simplement. Ainsi, la prochaine requête échouerait.
831
781
832
782
Pour un wrapper de promesse et `async/wait` la situation est la même.
833
783
834
784
Voici un exemple de `fetch` au milieu de la transaction :
835
-
=======
836
-
As we already know, a transaction auto-commits as soon as the browser is done with the current code and microtasks. So if we put a *macrotask* like `fetch` in the middle of a transaction, then the transaction won't wait for it to finish. It just auto-commits. So the next request in it would fail.
837
-
838
-
For a promise wrapper and `async/await` the situation is the same.
839
-
840
-
Here's an example of `fetch` in the middle of the transaction:
841
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
842
785
843
786
```js
844
787
let transaction =db.transaction("inventory", "readwrite");
@@ -855,15 +798,8 @@ Le prochain `inventory.add` après `fetch` `(*)` échoue avec une erreur "inacti
855
798
856
799
La solution de contournement est la même que lorsque vous travaillez avec IndexedDB natif : faites une nouvelle transaction ou séparez simplement les éléments.
857
800
858
-
<<<<<<< HEAD
859
801
1. Préparez les données et récupérez tout ce qui est nécessaire en premier.
860
802
2. Enregistrez ensuite dans la base de données.
861
-
=======
862
-
The workaround is the same as when working with native IndexedDB: either make a new transaction or just split things apart.
863
-
864
-
1. Prepare the data and fetch all that's needed first.
0 commit comments