Stockage Web HTML5

Qu'est-ce que le stockage Web HTML5 ?

L'utilisation de HTML5 pour stocker localement les données de navigation des utilisateurs constitue une meilleure méthode de stockage local que les cookies.

Auparavant, le stockage local utilisait des cookies. Mais le stockage Web doit être plus sécurisé et plus rapide. Les données ne seront pas enregistrées sur le serveur, mais ne seront utilisées que lorsque les utilisateurs demanderont des données sur le site Web. Il peut également stocker de grandes quantités de données sans affecter les performances du site Web.

Les données existent dans des paires clé/valeur, et les données d'une page Web ne peuvent être consultées et utilisées que par cette page Web.

---

Prise en charge du navigateur

Internet Explorer 8+, Firefox, Opera, Chrome et Safari prennent en charge le stockage Web.

Remarque: Internet Explorer 7 et les versions antérieures d'IE ne prennent pas en charge le stockage Web.

---

localStorage et sessionStorage

Il y a deux nouveaux objets pour stocker les données côté client :

• localStorage- stockage des données sans limite de temps

• sessionStorage- Stockage de données pour une session

Avant d'utiliser le stockage Web, vous devez vérifier si le navigateur prend en charge localStorage et sessionStorage :

if(typeof(Storage)!=="undefined")
{
// sessionStorage localStorage pris en charge !
// Code associé....
}
else
{
// Désolé, le stockage Web n'est pas pris en charge
}

---

objet localStorage

Il n'y a pas de limite de temps sur les données stockées par l'objet localStorage. Les données sont toujours disponibles après le jour, la semaine ou l'année suivante.

Exécutez le programme et essayez-le

Analyse d'instance :

Créez une clé/valeur de stockage local en utilisant key="lastname" et value= "Smith" Pour

récupérez la valeur avec la clé "lastname" et insérez les données dans l'élément avec id="result"

Astuce: Les paires clé/valeur sont généralement des chaînes de stockage, vous pouvez convertir le format en fonction de vos besoins.

---

L'exemple suivant montre le nombre de fois où l'utilisateur a cliqué sur le bouton. La valeur de chaîne dans le code est convertie en un type numérique : <. >

      
  
点击
 
 
单击该按钮查看计数器增加。
 
关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。
  

Exécutez le programme et essayez-le

---

Objet sessionStorage

La méthode sessionStorage stocke les données d'une session. Les données sont supprimées lorsque l'utilisateur ferme la fenêtre du navigateur.

Comment créer et accéder à une sessionStorage : :

      
  
点击
 
 
单击该按钮查看计数器增加。
 
关闭浏览器选项卡(或窗口),再试一次,计数器复位
  

Exécutez le programme pour l'essayer