# JavaScript et LocalStorage

Comment afficher des données issues d'un tableau JavaScript en HTML

Le début de votre fichier JavaScript ressemblera à ceci :

```js

const data = {
  "products": [
    {
      "id": 1,
      "name": "T-shirt",
      "price": 10,
      "quantity": 1,
      "image": "https://picsum.photos/200/300?random=1"
    },
    {
      "id": 2,
      "name": "Pantalon",
      "price": 20,
      "quantity": 2,
      "image": "https://picsum.photos/200/300?random=2"
    },
    {
      "id": 3,
      "name": "Chaussures",
      "price": 30,
      "quantity": 1,
      "image": "https://picsum.photos/200/300?random=3"
    }
  ]
}

document.addEventListener('DOMContentLoaded', () => {

    //Le dom est chargé,  votre code ici...
    
});
```

Le plus pratique est de donner un id à votre tableau de votre panier, et de récupérer cet élément dans votre code JavaScript.

```js
const panier = document.getElementById('panier');
```

Cette ligne devrait se trouver dans la partie tbody de votre tableau. On peut donc ajouter cette partie tbody à notre tableau (s'il n'en contient pas encore)

```js
  const tbody = document.createElement('tbody')
  panier.appendChild(tbody)
```

Ensuite, vous pouvez parcourir les produits (products) des données json, et ajouter une ligne par produit.

```js
data.products.forEach(product => {
    //Ajouter une ligne au tableau
});
```

Il vous reste ensuite à définir le code HTML qui va être généré pour chaque ligne de produit, et l'ajouter à votre tableau.

```js
const tr = document.createElement('tr');
tr.innerHTML = `
    <td>...vos données pour un produit ...</td>
`;
tbody.appendChild(tr);
```

### Travail à faire

* Afficher les données dans votre page panier, à partir des données json.
* Ajoutez toutes les parties nécessaires (total, TVA, ...)
* Alimentez ces zones (en JavaScript) avec les éléments de votre panier (calculé le coût total du panier, la TVA (20%), ...)
* Ajoutez tous les boutons et interactions nécessaires (supprimer un produit, modifier la quantité, ...)
* Prenez le temps d'intégrer correctement l'ensemble des éléments et d'ajouter une barre de menu.
* Pensez à l'ergonomie, l'accessibilité et l'UX de votre page

{% hint style="info" %}
Pensez au formatage des données (dates, ...). Les fonctions JavaScript peuvent être très pratiques pour éviter de réécrire la même chose...
{% endhint %}

### Stockage dans le localStorage

Actuellement, si vous actualisez votre page, tout est perdu. Ce n'est pas très pratique... Une solution simple consiste à stocker les informations dans le `localStorage` ou `sessionStorage`.

Lire ici pour plus de détails : <https://fr.javascript.info/localstorage>

* Les principales caractéristiques de `localStorage` sont les suivantes :
  * 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.
* L’objet `sessionStorage` est beaucoup moins utilisé que `localStorage`.
  * Les propriétés et les méthodes sont les mêmes, mais c’est beaucoup plus limité :
  * Le `sessionStorage` n’existe que dans l’onglet actuel du navigateur.
  * Un autre onglet avec la même page aura un stockage différent.
  * Mais il est partagé entre les iframes du même onglet (en supposant qu’ils proviennent de la même origine).
  * Les données survivent à l’actualisation de la page, mais pas à la fermeture/ouverture de l’onglet.

Nous allons utiliser `localStorage` pour stocker les produits du panier. Les méthodes principales sont :

* `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.