diff --git a/6-data-storage/02-localstorage/1-form-autosave/task.md b/6-data-storage/02-localstorage/1-form-autosave/task.md index 2b147d79c..648c9812e 100644 --- a/6-data-storage/02-localstorage/1-form-autosave/task.md +++ b/6-data-storage/02-localstorage/1-form-autosave/task.md @@ -1,10 +1,9 @@ +# Enregistrer automatiquement un champ de formulaire -# Autosave a form field +Créez un champ `textarea` qui "enregistre automatiquement" sa valeur à chaque modification. -Create a `textarea` field that "autosaves" its value on every change. +Ainsi, si l'utilisateur ferme accidentellement la page et l'ouvre à nouveau, il retrouvera sa saisie inachevée à la place. -So, if the user accidentally closes the page, and opens it again, he'll find his unfinished input at place. - -Like this: +Comme ceci : [iframe src="solution" height=120] diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 412f44c16..45d66052c 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -1,115 +1,115 @@ # LocalStorage, sessionStorage -Web storage objects `localStorage` and `sessionStorage` allow to save key/value pairs in the browser. +Les objets de stockage Web `localStorage` et `sessionStorage` permettent d'enregistrer les paires clé/valeur dans le navigateur. -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. +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. -We already have cookies. Why additional objects? +Nous avons déjà des cookies. Pourquoi des objets supplémentaires ? -- 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. -- Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript. -- 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. +- 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. +- 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. +- 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. -Both storage objects provide same methods and properties: +Les deux objets de stockage fournissent les mêmes méthodes et propriétés : -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key on a given position. -- `length` -- the number of stored items. +- `setItem(key, value)` -- stocke la paire clé/valeur. +- `getItem(key)` -- récupère la valeur par clé. +- `removeItem(key)` -- supprime la clé avec sa valeur. +- `clear()` -- supprime tout. +- `key(index)` -- récupère la clé sur une position donnée. +- `length` -- le nombre d'éléments stockés. -As you can see, it's like a `Map` collection (`setItem/getItem/removeItem`), but also allows access by index with `key(index)`. +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)`. -Let's see how it works. +Voyons voir comment ça fonctionne. -## localStorage demo +## Démo localStorage -The main features of `localStorage` are: +Les principales caractéristiques de `localStorage` sont les suivantes : -- Shared between all tabs and windows from the same origin. -- The data does not expire. It remains after the browser restart and even OS reboot. +- Partagé entre tous les onglets et fenêtres d'une même origine. +- 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. -For instance, if you run this code... +Par exemple, si vous exécutez ce code... ```js run localStorage.setItem('test', 1); ``` -...And close/open the browser or just open the same page in a different window, then you can get it like this: +...Et fermez/ouvrez le navigateur ou ouvrez simplement la même page dans une autre fenêtre, alors vous pouvez l'obtenir comme ceci : ```js run alert( localStorage.getItem('test') ); // 1 ``` -We only have to be on the same origin (domain/port/protocol), the url path can be different. +Il suffit d'être sur la même origine (domaine/port/protocole), le chemin de l'url peut être différent. -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. +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. -## Object-like access +## Accès de type objet -We can also use a plain object way of getting/setting keys, like this: +Nous pouvons également utiliser un objet simple pour obtenir/définir des clés, comme ceci : ```js run -// set key +// définir la clé localStorage.test = 2; -// get key +// obtenir la clé alert( localStorage.test ); // 2 -// remove key +// supprimer clé delete localStorage.test; ``` -That's allowed for historical reasons, and mostly works, but generally not recommended, because: +C'est autorisé pour des raisons historiques, et fonctionne plus ou moins, mais généralement déconseillé, car : -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: +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 : - ```js run - let key = 'length'; - localStorage[key] = 5; // Error, can't assign length - ``` + ```js run + let key = 'length'; + localStorage[key] = 5; // Erreur, impossible d'attribuer 'length' + ``` -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 in this chapter. +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. -## Looping over keys +## Boucle sur les clés -As we've seen, the methods provide "get/set/remove by key" functionality. But how to get all saved values or keys? +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 ? -Unfortunately, storage objects are not iterable. +Malheureusement, les objets de stockage ne sont pas itérables. -One way is to loop over them as over an array: +Une façon consiste à boucler sur eux comme sur un tableau : ```js run -for(let i=0; i { // can also use window.addEventListener('storage', event => { - if (event.key != 'now') return; - alert(event.key + ':' + event.newValue + " at " + event.url); +// se déclenche sur les mises à jour effectuées sur le même stockage à partir d'autres documents +window.onstorage = (event) => { + // peut également utiliser window.addEventListener('storage', event => { + if (event.key != "now") return; + alert(event.key + ":" + event.newValue + " at " + event.url); }; localStorage.setItem('now', Date.now()); ``` -Please note that the event also contains: `event.url` -- the url of the document where the data was updated. +Veuillez noter que l'événement contient également : `event.url` -- l'url du document où les données ont été mises à jour. -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. +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. -**That allows different windows from the same origin to exchange messages.** +**Cela permet à différentes fenêtres d'une même origine d'échanger des messages.** -Modern browsers also support [Broadcast channel API](mdn:/api/Broadcast_Channel_API), the special API for 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. +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. -## Summary +## Résumé -Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser. +Les objets de stockage Web `localStorage` et `sessionStorage` permettent de stocker des paires clé/valeur dans le navigateur. -- Both `key` and `value` must be strings. -- The limit is 5mb+, depends on the browser. -- They do not expire. -- The data is bound to the origin (domain/port/protocol). +- `clé` et `valeur` doivent être des chaînes. +- La limite est de 5mb+, dépend du navigateur. +- Ils n'expirent pas. +- Les données sont liées à l'origine (domaine/port/protocole). -| `localStorage` | `sessionStorage` | -|----------------|------------------| -| Shared between all tabs and windows with the same origin | Visible within a browser tab, including iframes from the same origin | -| Survives browser restart | Survives page refresh (but not tab close) | +| `localStorage` | `sessionStorage` | +| ---------------------------------------------------------- | ------------------------------------------------------------------------------ | +| 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 | +| Survit au redémarrage du navigateur | Survit à l'actualisation de la page (mais pas à la fermeture de l'onglet) | -API: +API : -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key number `index`. -- `length` -- the number of stored items. -- Use `Object.keys` to get all keys. -- We access keys as object properties, in that case `storage` event isn't triggered. +- `setItem(key, value)` -- stocke la paire clé/valeur. +- `getItem(key)` -- récupère la valeur par clé. +- `removeItem(key)` -- supprime la clé avec sa valeur. +- `clear()` -- supprime tout. +- `key(index)` -- récupère la clé sur une position donnée. +- `length` -- le nombre d'éléments stockés. +- Utilisez `Object.keys` pour obtenir toutes les clés. +- 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é. -Storage event: +Événement de stockage : -- Triggers on `setItem`, `removeItem`, `clear` calls. -- Contains all the data about the operation (`key/oldValue/newValue`), the document `url` and the storage object `storageArea`. -- 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`). +- Se déclenche sur les appels `setItem`, `removeItem`, `clear`. +- Contient toutes les données sur l'opération (`key/oldValue/newValue`), le document `url` et l'objet de stockage `storageArea`. +- 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`).