HTML API de stockage Web
API de stockage Web HTML : mieux que les cookies.
Qu'est-ce que le stockage Web HTML ?
Avec le stockage Web, les applications peuvent stocker des données localement dans le navigateur de l'utilisateur.
Avant HTML5, les données des applications devaient être stockées dans des cookies, inclus dans chaque requête serveur. Le stockage Web est plus sécurisé et permet de stocker de grandes quantités de données localement, sans affecter les performances du site Web.
Contrairement aux cookies, la limite de stockage est beaucoup plus grande (au moins 5 Mo) et les informations ne sont jamais transférées au serveur.
Le stockage Web est spécifique à l'origine (par domaine et protocole). Toutes les pages d'une même origine peuvent stocker et accéder aux mêmes données.
Objets de l'API de stockage Web
Le stockage Web fournit deux objets pour stocker des données dans le navigateur :
-
window.localStorage- stocke des données sans date d'expiration (les données ne sont pas perdues lorsque l'onglet du navigateur est fermé) -
window.sessionStorage- stocke des données pour une session (les données sont perdues lorsque l'onglet du navigateur est fermé)
Support des navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend en charge pleinement le stockage Web.
| API | |||||
|---|---|---|---|---|---|
| localStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
| sessionStorage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Tester le support de l'API de stockage Web
Avant d'utiliser le stockage Web, nous pouvons rapidement vérifier le support du navigateur pour localStorage et sessionStorage :
Exemple
Tester le support du navigateur :
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
x.innerHTML = "Votre navigateur prend en charge le stockage Web !";
} else {
x.innerHTML = "Désolé, votre navigateur ne prend pas en charge le stockage Web !";
}
</script> L'objet localStorage
L'objet localStorage stocke les données sans date d'expiration. Les données ne seront pas perdues lorsque le navigateur est fermé et seront disponibles le lendemain, la semaine suivante ou l'année suivante.
Exemple
Utilisez localStorage pour définir et récupérer des paires nom/valeur :
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
// Stocker
localStorage.setItem("lastname", "Smith");
localStorage.setItem("bgcolor", "yellow");
// Récupérer
x.innerHTML = localStorage.getItem("lastname");
x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
x.innerHTML = "Désolé, pas de support pour le stockage Web !";
}
</script> Exemple expliqué :
- Utilisez la méthode
localStorage.setItem()pour créer des paires nom/valeur - Utilisez la méthode
localStorage.getItem()pour récupérer les valeurs définies - Récupérez la valeur de "lastname" et insérez-la dans un élément avec id="result"
- Récupérez la valeur de "bgcolor" et insérez-la dans le style backgroundColor de l'élément avec id="result"
La syntaxe pour supprimer l'élément localStorage "lastname" est la suivante :
localStorage.removeItem("lastname"); Remarque : Les paires nom/valeur sont toujours stockées sous forme de chaînes. N'oubliez pas de les convertir dans un autre format si nécessaire !
Compter les clics avec localStorage
L'exemple suivant compte le nombre de fois qu'un utilisateur a cliqué sur un bouton. Dans ce code, la chaîne de valeur est convertie en nombre pour pouvoir augmenter le compteur :
Exemple
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
x.innerHTML = "Vous avez cliqué sur le bouton " + localStorage.clickcount + " fois !";
} else {
x.innerHTML = "Désolé, pas de support pour le stockage Web !";
}
}
</script> L'objet sessionStorage
L'objet sessionStorage est équivalent à l'objet localStorage , sauf qu'il stocke les données pour une seule session ! Les données sont supprimées lorsque l'utilisateur ferme l'onglet spécifique du navigateur.
Compter les clics avec sessionStorage
L'exemple suivant compte le nombre de fois qu'un utilisateur a cliqué sur un bouton, dans la session actuelle :
Exemple
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
x.innerHTML = "Vous avez cliqué sur le bouton " + sessionStorage.clickcount + " fois dans cette session !";
} else {
x.innerHTML = "Désolé, pas de support pour le stockage Web !";
}
}
</script>