HTML stockage local, mieux que les cookies .
Qu'est-ce que HTML stockage local?
Avec le stockage local, 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és dans les cookies , inclus dans chaque demande de serveur. Le stockage local est plus sûr, et de grandes quantités de données peuvent être stockées localement, sans affecter les performances du site.
Contrairement à des cookies , la limite de stockage est beaucoup plus grande (at least 5MB) et les informations ne sont jamais transférés au serveur.
Le stockage local est par origine (per domain and protocol) . Toutes les pages, d'une origine, peuvent stocker et accéder aux mêmes données.
Le stockage local et de la session
le stockage Web offre deux zones de stockage local de stockage différents et une session de stockage, qui diffèrent dans leur portée et durée de vie.
Les données placées dans le stockage local est par origine (la combinaison du protocole, le nom d'hôte et le numéro de port tel que défini dans la politique d'origine) (les données sont disponibles pour tous les scripts chargés à partir des pages de la même origine que précédemment stockées les données) et après persiste le navigateur est fermé.
le stockage de session est par origine-par-fenêtre ou onglet et se limite à la durée de vie de la fenêtre. le stockage de session est destinée à permettre des instances distinctes de la même application Web pour fonctionner dans des fenêtres différentes sans interférer les uns avec les autres, un cas d'utilisation qui est pas bien pris en charge par les cookies.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement le stockage local.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Stockage local Objets
HTML stockage local fournit deux objets pour stocker des données sur le client:
- window.localStorage - stocke les données sans date d'expiration
- window.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 local, consultez support 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és lorsque le navigateur est fermé, et seront disponibles le lendemain, la semaine ou l'année.
Exemple
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Essayez vous - même » Exemple expliqué:
- Créer un localStorage paire nom / valeur avec name="lastname" et value="Smith"
- Récupérer la valeur de "lastname" et l' insérer dans l'élément avec id = « résultat »
L'exemple ci-dessus pourrait également être écrit comme ceci:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La syntaxe pour enlever le "lastname" élément de localStorage 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 en cas de besoin!
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 un nombre pour être en mesure d'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)."; Essayez vous - même » Le sessionStorage objet
Le sessionStorage objet est égal au localStorage objet, sauf qu'il stocke les données pour une seule session. Les données sont supprimées lorsque l'utilisateur ferme l'onglet du navigateur spécifique.
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."; Essayez vous - même »