API de stockage Web
L'API Web Storage est une syntaxe simple pour stocker et récupérer des données dans le navigateur. Il est très simple d'utilisation :
Exemple
localStorage.setItem("name", "John Doe");
localStorage.getItem("name");
L'API Web Storage est prise en charge dans tous les navigateurs :
| Chrome | IE/Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
L'objet localStorage
L'objet localStorage permet d'accéder à un stockage local pour un site Web particulier. Il vous permet de stocker, lire, ajouter, modifier et supprimer des éléments de données pour ce domaine.
Les données sont stockées sans date d'expiration et ne seront pas supprimées à la fermeture du navigateur.
Les données seront disponibles pendant des jours, des semaines et des années.
La méthode setItem()
La méthode localStorage.setItem() stocke un élément de données dans un stockage.
Il prend un nom et une valeur en paramètres :
Exemple
localStorage.setItem("name", "John Doe");
La méthode getItem()
La méthode localStorage.getItem() récupère un élément de données du stockage.
Il prend un nom en paramètre :
Exemple
localStorage.getItem("name");
L'objet sessionStorage
L'objet sessionStorage est identique à l'objet localStorage.
La différence est que l'objet sessionStorage stocke les données d'une session.
Les données sont supprimées lorsque le navigateur est fermé.
Exemple
sessionStorage.getItem("name");
La méthode setItem()
La méthode sessionStorage.setItem() stocke un élément de données dans un stockage.
Il prend un nom et une valeur en paramètres :
Exemple
sessionStorage.setItem("name", "John Doe");
La méthode getItem()
La méthode sessionStorage.getItem() récupère un élément de données du stockage.
Il prend un nom en paramètre :
Exemple
sessionStorage.getItem("name");
Propriétés et méthodes des objets de stockage
| Property/Method | Description |
|---|---|
| key(n) | Returns the name of the nth key in the storage |
| length | Returns the number of data items stored in the Storage object |
| getItem(keyname) | Returns the value of the specified key name |
| setItem(keyname, value) | Adds that key to the storage, or update that key's value if it already exists |
| removeItem(keyname) | Removes that key from the storage |
| clear() | Empty all key out of the storage |
Pages associées pour l'API de stockage Web
| Property | Description |
|---|---|
| window.localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
| window.sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |