HTML API de stockage Web
HTML stockage Web ; mieux que les cookies.
Qu'est-ce que le stockage Web HTML ?
Grâce au stockage Web, les applications Web 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 du 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 bien plus grande (au moins 5 Mo) et les informations ne sont jamais transférées au serveur.
Le stockage Web s'effectue par origine (par domaine et protocole). Toutes les pages, d'une seule origine, peuvent stocker et accéder aux mêmes données.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le stockage Web.
| API | |||||
|---|---|---|---|---|---|
| Stockage Web | 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") {
// Coder pour localStorage/sessionStorage.
} else {
// Désolé ! Pas de prise en charge du stockage Web.
}
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 suivante.
Exemple
// Magasin
localStorage.setItem("lastname", "Smith");
// Récupérer
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Try it Yourself »
Exemple expliqué :
- Créez une paire nom/valeur localStorage avec name="lastname" and value="Smith"
- Récupérer la valeur de "lastname" et insérez-le dans l'élément avec id="result"
L’exemple ci-dessus pourrait également s’écrire ainsi :
// Magasin
localStorage.lastname = "Smith";
// Récupérer
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).";
Try it Yourself »
L'objet sessionStorage
L'objet sessionStorage 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, au cours de la session en cours :
Exemple
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = " Vous avez cliqué sur le bouton " +
sessionStorage.clickcount + " heure(s) de cette séance.";
Try it Yourself »
