Add Storages/IndexDB + import windows symbols

Web/X - API JS-DOM/index.md

@@ -7,6 +7,33 @@ include_toc: true
 
 [TOC]
 
+# Utilisation de l'API JS/DOM en Brython
+
+Brython a un accès complet de l'API JS/DOM via `window`.
+
+Si vous utilisez `components.py`, le contenu de `window` est automatiquement importé dans l'espace global de Brython.
+
+Sinon, vous pouvez soit :
+
+1. Importer `window` :
+  ```python
+  from browser import window
+   
+  window.document
+  ```
+2. Importer le contenu de `window` dans l'espace global de Brython :
+  ```python
+  from browser import window
+  
+  g = globals()
+  for x in window.Object.getOwnPropertyNames(window):
+
+  	if x in g or x.startswith("on"):
+  		continue
+
+  	g[x] = getattr(window, x, None)
+  ```
+
 # Sélectionner des éléments HTML
 
 - Sélectionner un élément à partir d'un sélecteur CSS :
@@ -101,8 +128,6 @@ for name in $ELEM.getAttributeNames():
 
 📖 [Plus de méthodes disponibles dans la documentation.](https://developer.mozilla.org/en-US/docs/Web/API/Element)
 
-
-
 # Événements
 
 ## Bubble vs Capture
@@ -113,14 +138,10 @@ for name in $ELEM.getAttributeNames():
 
 - bubble
 
-
-
 **Capture :** La phase de capture est descendante, elle part du noeud racine et descend vers le noeud cible (target) final. Par exemple, lorsque vous cliquez sur un élément, l'événement de clic va d'abord partir du document, puis par le body. Le navigateur va propager l'événement en se demandant quel fils de l'élément courant est la cible de l'événement, afin de lui transmettre l'événement, puis recommence de manière récursive, l'élément fils cible devenant l'élément courant.
 
 **Bubble :** La phase de buble est montante, elle part du noeud cible (target) final et remonte vers le noeud racine. Si l'événement se propage dans le DOM (`bubble: true`), le navigateur va transmettre l'événement à l'élément père de l'élément courant, puis recommence de manière récursive, l'élément père devant l'élément courant.
 
-
-
 ## Écouter un événement
 
 ```javascript
@@ -208,8 +229,6 @@ $ELEM.dispatchEvent( CustomEvent.new($EVENT_NAME, {"detail": $EVENT_DATA}) )
 
 💡 Vous pouvez aussi ajouter, au 2ème argument, l'option `bubble: true` pour faire en sorte que l'événement soit bubble, i.e. se propage dans le DOM (par default `bubble: false`).
 
-
-
 # Envoyer une requête REST
 
 ```javascript
@@ -292,3 +311,27 @@ params.has($NAME) # retourne un booléen
 📖 [Plus d'informations dans la documentation.](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
 
 💡 `location` contient les informations relatives à l'URL de la page actuelle. Vous pouvez ainsi récupérer la chaîne de paramètres via `location.search`, et l'exploiter en la donnant au constructeur de `URLSearchParams`.
+
+# Stocker des données côté client
+
+Précedemment, les données enregistrées côté client étaient stockées sous la forme de cookies, inclues dans l'en-tête de chaque requêtes HTTP envoyées au serveur. Cette technologie est désormais obsolète au profit de `localStorage`, `sessionStorage`, et `IndexDB`. Contrairement aux cookies, les données enregistrées par un site Web (identifié par son nom de domaine) ne peuvent pas être accedées via d'autres noms de domaines.
+
+## LocalStorage/SessionStorage
+
+```javascript
+localStorage.setItem($NAME, JSON.stringify( $VALUE ) );
+JSON.parse( localStorage.getItem($NAME) ); // returne null si inexistant
+localStorage.removeItem($NAME);
+```
+
+La différence entre `localStorage` et `sessionStorage` est que le dernier est unique à chaque onglet du navigateur et sera supprimé lorsque l'onglet sera fermé. Les données stockées par un site Web ne peuvent généralement pas dépasser 10Mo.
+
+📖 [Plus d'informations dans la documentation.](https://developer.mozilla.org/en-US/docs/Web/API/Storage)
+
+## IndexDB
+
+L'usage d'indexDB est bien plus complexe que localStorage ou sessionStorage, mais permet de stocker des données plus volumineuses. Vous pouvez le voir comme une base de données stockée côté client.
+
+Son usage étant complexe et peu fréquent, nous ne l'étudierons pas en cours.
+
+📖 [Plus d'informations dans la documentation.](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)