API de stockage Web HTML
Stockage Web HTML ; mieux que les cookies.
Qu'est-ce que le stockage Web HTML ?
Avec le stockage Web, les applications Web peuvent stocker des données localement dans le navigateur de l'utilisateur.
Avant HTML5, les données d'application devaient être stockées dans des cookies, inclus dans chaque demande de serveur. Le stockage Web est plus sécurisé et de grandes quantités de données peuvent être stockées localement, sans affecter les performances du site Web.
Contrairement aux cookies, la limite de stockage est beaucoup plus importante (au moins 5 Mo) et les informations ne sont jamais transférées au serveur.
Le stockage Web est par origine (par domaine et protocole). Toutes les pages, d'une même origine, peuvent stocker et accéder aux mêmes données.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge Web Storage.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Objets de stockage Web HTML
Le stockage Web HTML fournit deux objets pour stocker les données sur le client :
window.localStorage- stocke les données sans date d'expirationwindow.sessionStorage- stocke les données pour une session (les données sont perdues lorsque l'onglet du navigateur est fermé)
Avant d'utiliser le stockage Web, vérifiez la prise en charge du navigateur pour localStorage et sessionStorage :
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
L'objet localStorage
L'objet localStorage stocke les données sans date d'expiration. Les données ne seront pas supprimées à la fermeture du navigateur et seront disponibles le jour, la semaine ou l'année suivant.
Exemple
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Exemple expliqué :
- Créez une paire nom/valeur localStorage avec name="lastname" et value="Smith"
- Récupérez la valeur de "lastname" et insérez-la dans l'élément avec id="result"
L'exemple ci-dessus pourrait aussi s'écrire ainsi :
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La syntaxe de suppression de 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 !
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
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
L'objet sessionStorage
L' sessionStorageobjet est égal à 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.
L'exemple suivant compte le nombre de fois qu'un utilisateur a cliqué sur un bouton, dans la session en cours :
Exemple
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";