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
Web storage objects `localStorage`and`sessionStorage`allow to save key/value pairs in the browser.
3
+
Les objets de stockage Web `localStorage`et`sessionStorage`permettent d'enregistrer les paires clé/valeur dans le navigateur.
4
4
5
-
What's interesting about them is that the data survives a page refresh (for`sessionStorage`) and even a full browser restart (for`localStorage`). We'll see that very soon.
5
+
Ce qui est intéressant à leur sujet, c'est que les données survivent à une actualisation de la page (pour`sessionStorage`) et même à un redémarrage complet du navigateur (pour`localStorage`). Nous verrons cela très bientôt.
6
6
7
-
We already have cookies. Why additional objects?
7
+
Nous avons déjà des cookies. Pourquoi des objets supplémentaires ?
8
8
9
-
-Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that.
10
-
-Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript.
11
-
-The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other.
9
+
-Contrairement aux cookies, les objets de stockage Web ne sont pas envoyés au serveur à chaque requête. Grâce à cela, nous pouvons stocker beaucoup plus. La plupart des navigateurs autorisent au moins 2 mégaoctets de données (ou plus) et ont des paramètres pour configurer cela.
10
+
-Contrairement aux cookies également, le serveur ne peut pas manipuler les objets de stockage via les en-têtes HTTP. Tout se fait en JavaScript.
11
+
-Le stockage est lié à l'origine (triplet domaine/protocole/port). Autrement dit, différents protocoles ou sous-domaines impliquent différents objets de stockage, ils ne peuvent pas accéder aux données les uns des autres.
12
12
13
-
Both storage objects provide same methods and properties:
13
+
Les deux objets de stockage fournissent les mêmes méthodes et propriétés :
14
14
15
-
-`setItem(key, value)` -- store key/value pair.
16
-
-`getItem(key)` -- get the value by key.
17
-
-`removeItem(key)` -- remove the key with its value.
18
-
-`clear()` -- delete everything.
19
-
-`key(index)` -- get the key on a given position.
20
-
-`length` -- the number of stored items.
15
+
-`setItem(key, value)` -- stocke la paire clé/valeur.
16
+
-`getItem(key)` -- récupère la valeur par clé.
17
+
-`removeItem(key)` -- supprime la clé avec sa valeur.
18
+
-`clear()` -- supprime tout.
19
+
-`key(index)` -- récupère la clé sur une position donnée.
20
+
-`length` -- le nombre d'éléments stockés.
21
21
22
-
As you can see, it's like a `Map`collection (`setItem/getItem/removeItem`), but also allows access by index with`key(index)`.
22
+
Comme vous pouvez le voir, c'est comme une collection `Map` (`setItem/getItem/removeItem`), mais permet également l'accès par index avec`key(index)`.
23
23
24
-
Let's see how it works.
24
+
Voyons voir comment ça fonctionne.
25
25
26
-
## localStorage demo
26
+
## Démo localStorage
27
27
28
-
The main features of`localStorage`are:
28
+
Les principales caractéristiques de`localStorage`sont les suivantes :
29
29
30
-
-Shared between all tabs and windows from the same origin.
31
-
-The data does not expire. It remains after the browser restart and even OS reboot.
30
+
-Partagé entre tous les onglets et fenêtres d'une même origine.
31
+
-Les données n'expirent pas. Il reste après le redémarrage du navigateur et même le redémarrage du système d'exploitation.
32
32
33
-
For instance, if you run this code...
33
+
Par exemple, si vous exécutez ce code...
34
34
35
35
```js run
36
36
localStorage.setItem('test', 1);
37
37
```
38
38
39
-
...And close/open the browser or just open the same page in a different window, then you can get it like this:
39
+
...Et fermez/ouvrez le navigateur ou ouvrez simplement la même page dans une autre fenêtre, alors vous pouvez l'obtenir comme ceci :
40
40
41
41
```js run
42
42
alert( localStorage.getItem('test') ); // 1
43
43
```
44
44
45
-
We only have to be on the same origin (domain/port/protocol), the url path can be different.
45
+
Il suffit d'être sur la même origine (domaine/port/protocole), le chemin de l'url peut être différent.
46
46
47
-
The`localStorage`is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one.
47
+
Le`localStorage`est partagé entre toutes les fenêtres avec la même origine, donc si nous définissons les données dans une fenêtre, le changement devient visible dans une autre.
48
48
49
-
## Object-like access
49
+
## Accès de type objet
50
50
51
-
We can also use a plain object way of getting/setting keys, like this:
51
+
Nous pouvons également utiliser un objet simple pour obtenir/définir des clés, comme ceci :
52
52
53
53
```js run
54
-
//set key
54
+
//définir la clé
55
55
localStorage.test=2;
56
56
57
-
//get key
57
+
//obtenir la clé
58
58
alert( localStorage.test ); // 2
59
59
60
-
//remove key
60
+
//supprimer clé
61
61
deletelocalStorage.test;
62
62
```
63
63
64
-
That's allowed for historical reasons, and mostly works, but generally not recommended, because:
64
+
C'est autorisé pour des raisons historiques, et fonctionne plus ou moins, mais généralement déconseillé, car :
65
65
66
-
1.If the key is user-generated, it can be anything, like`length`or`toString`, or another built-in method of `localStorage`. In that case`getItem/setItem`work fine, while object-like access fails:
66
+
1.Si la clé est générée par l'utilisateur, elle peut être n'importe quoi, comme`length`ou`toString`, ou une autre méthode intégrée de `localStorage`. Dans ce cas,`getItem/setItem`fonctionne correctement, tandis que l'accès de type objet échoue :
2.There's a `storage` event, it triggers when we modify the data. That event does not happen for object-like access. We'll see that later inthis chapter.
73
+
2.Il y a un événement `storage`, il se déclenche lorsque nous modifions les données. Cet événement ne se produit pas pour un accès de type objet. Nous verrons cela plus loin dans ce chapitre.
74
74
75
-
## Looping over keys
75
+
## Boucle sur les clés
76
76
77
-
As we've seen, the methods provide "get/set/remove by key" functionality. But how to get all saved values or keys?
77
+
Comme nous l'avons vu, les méthodes fournissent la fonctionnalité "get/set/remove by key". Mais comment obtenir toutes les valeurs ou clés enregistrées ?
78
78
79
-
Unfortunately, storage objects are not iterable.
79
+
Malheureusement, les objets de stockage ne sont pas itérables.
80
80
81
-
One way is to loop over them as over an array:
81
+
Une façon consiste à boucler sur eux comme sur un tableau :
82
82
83
83
```js run
84
-
for(let i=0; i<localStorage.length; i++) {
84
+
for(let i=0; i<localStorage.length; i++) {
85
85
let key =localStorage.key(i);
86
86
alert(`${key}: ${localStorage.getItem(key)}`);
87
87
}
88
88
```
89
89
90
-
Another way is to use `for key in localStorage` loop, just as we do with regular objects.
90
+
Une autre façon consiste à utiliser la boucle `for key in localStorage`, comme nous le faisons avec des objets normaux.
91
91
92
-
It iterates over keys, but also outputs few built-in fields that we don't need:
92
+
Il itère sur les clés, mais génère également quelques champs intégrés dont nous n'avons pas besoin :
93
93
94
94
```js run
95
-
// bad try
95
+
//mauvais essai
96
96
for(let key in localStorage) {
97
-
alert(key); // shows getItem, setItem and other built-in stuff
97
+
alert(key); //affiche getItem, setItem et d'autres éléments intégrés
98
98
}
99
99
```
100
100
101
-
...So we need either to filter fields from the prototype with`hasOwnProperty` check:
101
+
...Nous devons donc soit filtrer les champs du prototype avec la vérification `hasOwnProperty`:
102
102
103
103
```js run
104
104
for(let key in localStorage) {
105
105
if (!localStorage.hasOwnProperty(key)) {
106
-
continue; // skip keys like "setItem", "getItem" etc
106
+
continue; //sauter des clés comme "setItem", "getItem" etc.
107
107
}
108
108
alert(`${key}: ${localStorage.getItem(key)}`);
109
109
}
110
110
```
111
111
112
-
...Or just get the "own" keys with`Object.keys` and then loop over them if needed:
112
+
...Ou récupérez simplement les clés "propres" avec `Object.keys`, puis bouclez-les si nécessaire :
113
113
114
114
```js run
115
115
let keys =Object.keys(localStorage);
@@ -118,13 +118,13 @@ for(let key of keys) {
118
118
}
119
119
```
120
120
121
-
The latter works, because`Object.keys`only returns the keys that belong to the object, ignoring the prototype.
121
+
Ce dernier fonctionne, car`Object.keys`ne renvoie que les clés appartenant à l'objet, en ignorant le prototype.
122
122
123
-
## Strings only
123
+
## Chaînes uniquement
124
124
125
-
Please note that both key and value must be strings.
125
+
Veuillez noter que la clé et la valeur doivent être des chaînes.
126
126
127
-
If were any other type, like a number, or an object, it gets converted to string automatically:
127
+
S'il s'agissait d'un autre type, comme un nombre ou un objet, il est automatiquement converti en chaîne :
128
128
129
129
```js run
130
130
localStorage.user= {name:"John"};
@@ -136,114 +136,115 @@ We can use `JSON` to store objects though:
136
136
```js run
137
137
localStorage.user=JSON.stringify({name:"John"});
138
138
139
-
// sometime later
139
+
//un peu plus tard
140
140
let user =JSON.parse( localStorage.user );
141
141
alert( user.name ); // John
142
142
```
143
143
144
-
Also it is possible to stringify the whole storage object, e.g. for debugging purposes:
144
+
Il est également possible de transformer en chaîne l'ensemble de l'objet de stockage, par ex. à des fins de débogage :
145
145
146
146
```js run
147
-
// added formatting options to JSON.stringify to make the object look nicer
147
+
//ajout d'options de formatage à JSON.stringify pour rendre l'objet plus beau
148
148
alert( JSON.stringify(localStorage, null, 2) );
149
149
```
150
150
151
151
## sessionStorage
152
152
153
-
The`sessionStorage`object is used much less often than`localStorage`.
153
+
L'objet`sessionStorage`est beaucoup moins utilisé que`localStorage`.
154
154
155
-
Properties and methods are the same, but it's much more limited:
155
+
Les propriétés et les méthodes sont les mêmes, mais c'est beaucoup plus limité :
156
156
157
-
- The `sessionStorage` exists only within the current browser tab.
158
-
- Another tab with the same page will have a different storage.
159
-
- But it is shared between iframes in the same tab (assuming they come from the same origin).
160
-
- The data survives page refresh, but not closing/opening the tab.
157
+
-Le`sessionStorage`n'existe que dans l'onglet actuel du navigateur.
158
+
-Un autre onglet avec la même page aura un stockage différent.
159
+
-Mais il est partagé entre les iframes du même onglet (en supposant qu'ils proviennent de la même origine).
160
+
-Les données survivent à l'actualisation de la page, mais pas à la fermeture/ouverture de l'onglet.
161
161
162
-
Let's see that in action.
162
+
Voyons cela en action.
163
163
164
-
Run this code...
164
+
Exécutez ce code...
165
165
166
166
```js run
167
167
sessionStorage.setItem('test', 1);
168
168
```
169
169
170
-
...Then refresh thepage. Now you can still get the data:
170
+
...Puis actualisez la page. Maintenant, vous pouvez toujours obtenir les données :
171
171
172
172
```js run
173
-
alert( sessionStorage.getItem('test') ); // after refresh: 1
...But if you open the same page in another tab, and try again there, the code above returns`null`, meaning "nothing found".
176
+
...Mais si vous ouvrez la même page dans un autre onglet et réessayez, le code ci-dessus renvoie`null`, ce qui signifie "rien trouvé".
177
177
178
-
That's exactly because `sessionStorage` is bound not only to the origin, but also to the browser tab. For that reason, `sessionStorage` is used sparingly.
178
+
C'est exactement parce que `sessionStorage`est lié non seulement à l'origine, mais également à l'onglet du navigateur. Pour cette raison, `sessionStorage`est utilisé avec parcimonie.
179
179
180
-
## Storage event
180
+
## Événement de stockage
181
181
182
-
When the data gets updated in `localStorage` or `sessionStorage`, [storage](https://html.spec.whatwg.org/multipage/webstorage.html#the-storageevent-interface) event triggers, with properties:
182
+
Lorsque les données sont mises à jour dans `localStorage`ou`sessionStorage`, l'événement [storage](https://html.spec.whatwg.org/multipage/webstorage.html#the-storageevent-interface)se déclenche, avec les propriétés :
183
183
184
-
- `key` – the key that was changed (`null` if `.clear()` is called).
185
-
- `oldValue` – the old value (`null` if the key is newly added).
186
-
- `newValue` – the new value (`null` if the key is removed).
187
-
- `url` – the url of the document where the update happened.
188
-
- `storageArea` – either `localStorage` or `sessionStorage` object where the update happened.
184
+
-`key` – la clé qui a été changée (`null`si`.clear()`est appelé).
185
+
-`oldValue`- l'ancienne valeur (`null`si la clé vient d'être ajoutée).
186
+
-`newValue`- la nouvelle valeur (`null`si la clé est supprimée).
187
+
-`url`- l'url du document où la mise à jour s'est produite.
188
+
-`storageArea`- objet`localStorage`ou`sessionStorage`où la mise à jour s'est produite.
189
189
190
-
The important thing is: the event triggers on all `window` objects where the storage is accessible, except the one that caused it.
190
+
L'important est que l'événement se déclenche sur tous les objets `window`où le stockage est accessible, sauf celui qui l'a provoqué.
191
191
192
-
Let's elaborate.
192
+
Élaborons.
193
193
194
-
Imagine, you have two windows with the same site ineach. So`localStorage`is shared between them.
194
+
Imaginez, vous avez deux fenêtres avec le même site dans chacune. Donc`localStorage`est partagé entre eux.
195
195
196
-
```online
197
-
You might want to open this page in two browser windows to test the code below.
196
+
```en ligne
197
+
Vous pouvez ouvrir cette page dans deux fenêtres de navigateur pour tester le code ci-dessous.
198
198
```
199
199
200
-
If both windows are listening for`window.onstorage`, then each one will react on updates that happened in the other one.
200
+
Si les deux fenêtres écoutent `window.onstorage`, chacune réagira aux mises à jour qui se sont produites dans l'autre.
201
201
202
202
```js run
203
-
// triggers on updates made to the same storage from other documents
204
-
window.onstorage = event => { // can also use window.addEventListener('storage', event => {
// se déclenche sur les mises à jour effectuées sur le même stockage à partir d'autres documents
204
+
window.onstorage= (event) => {
205
+
// peut également utiliser window.addEventListener('storage', event => {
206
+
if (event.key!="now") return;
207
+
alert(event.key+":"+event.newValue+" at "+event.url);
207
208
};
208
209
209
210
localStorage.setItem('now', Date.now());
210
211
```
211
212
212
-
Please note that the event also contains:`event.url`--the url of the documentwhere the data was updated.
213
+
Veuillez noter que l'événement contient également : `event.url` -- l'url du document où les données ont été mises à jour.
213
214
214
-
Also, `event.storageArea`contains the storage object--the event is the same for both `sessionStorage`and`localStorage`, so`event.storageArea`references the one that was modified. We may even want to set something back in it, to "respond" to a change.
215
+
De plus, `event.storageArea`contient l'objet de stockage -- l'événement est le même pour `sessionStorage`et`localStorage`, donc`event.storageArea`fait référence à celui qui a été modifié. On peut même vouloir y remettre quelque chose, "répondre" à un changement.
215
216
216
-
**That allows different windows from the same origin to exchange messages.**
217
+
**Cela permet à différentes fenêtres d'une même origine d'échanger des messages.**
217
218
218
-
Modern browsers also support [Broadcast channel API](mdn:/api/Broadcast_Channel_API), the special APIfor same-origin inter-window communication, it's more full featured, but less supported. There are libraries that polyfill that API, based on `localStorage`, that make it available everywhere.
219
+
Les navigateurs modernes prennent également en charge [Broadcast channel API](mdn:/api/Broadcast_Channel_API), l'API spéciale pour la communication inter-fenêtre de même origine, elle est plus complète, mais moins prise en charge. Il existe des bibliothèques qui polyfill cette API, basée sur`localStorage`, qui la rendent disponible partout.
219
220
220
-
## Summary
221
+
## Résumé
221
222
222
-
Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser.
223
+
Les objets de stockage Web `localStorage`et`sessionStorage`permettent de stocker des paires clé/valeur dans le navigateur.
223
224
224
-
- Both `key` and `value` must be strings.
225
-
- The limit is 5mb+, depends on the browser.
226
-
- They do not expire.
227
-
- The data is bound to the origin (domain/port/protocol).
225
+
-`clé` et `valeur` doivent être des chaînes.
226
+
-La limite est de 5mb+, dépend du navigateur.
227
+
-Ils n'expirent pas.
228
+
-Les données sont liées à l'origine (domaine/port/protocole).
228
229
229
-
| `localStorage` | `sessionStorage` |
230
-
|----------------|------------------|
231
-
| Shared between all tabs and windows with the same origin | Visible within a browser tab, including iframes from the same origin |
|Partagé entre tous les onglets et fenêtres de même origine| Visible dans un onglet de navigateur, y compris les iframes de la même origine|
233
+
|Survit au redémarrage du navigateur | Survit à l'actualisation de la page (mais pas à la fermeture de l'onglet) |
233
234
234
-
API:
235
+
API:
235
236
236
-
- `setItem(key, value)` -- store key/value pair.
237
-
- `getItem(key)` -- get the value by key.
238
-
- `removeItem(key)` -- remove the key with its value.
239
-
- `clear()` -- delete everything.
240
-
- `key(index)` -- get the key number `index`.
241
-
- `length` -- the number of stored items.
242
-
- Use `Object.keys` to get all keys.
243
-
- We access keys as object properties, in that case `storage` event isn't triggered.
237
+
-`setItem(key, value)` -- stocke la paire clé/valeur.
238
+
-`getItem(key)` -- récupère la valeur par clé.
239
+
-`removeItem(key)` -- supprime la clé avec sa valeur.
240
+
-`clear()` -- supprime tout.
241
+
-`key(index)` -- récupère la clé sur une position donnée.
242
+
-`length` -- le nombre d'éléments stockés.
243
+
-Utilisez`Object.keys`pour obtenir toutes les clés.
244
+
-Nous accédons aux clés en tant que propriétés d'objet, dans ce cas l'événement `storage`n'est pas déclenché.
244
245
245
-
Storageevent:
246
+
Événement de stockage :
246
247
247
-
-Triggers on `setItem`, `removeItem`, `clear` calls.
248
-
-Contains all the data about the operation(`key/oldValue/newValue`), thedocument`url`and the storage object`storageArea`.
249
-
-Triggers on all `window`objects that have access to the storage except the one that generated it (within a tab for`sessionStorage`, globally for`localStorage`).
248
+
-Se déclenche sur les appels `setItem`, `removeItem`, `clear`.
249
+
-Contient toutes les données sur l'opération (`key/oldValue/newValue`), le document `url`et l'objet de stockage`storageArea`.
250
+
-Se déclenche sur tous les objets `window`qui ont accès au stockage sauf celui qui l'a généré (dans un onglet pour`sessionStorage`, globalement pour`localStorage`).
0 commit comments