Explication détaillée des exemples de stockage HTML5Web

Stockage Web HTML5, une meilleure méthode de stockage local que le cookie.

Qu'est-ce que le stockage Web HTML5 ?

En utilisant HTML5, vous pouvez stocker les données de navigation de l'utilisateur localement.

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 des navigateurs

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 existe deux nouveaux objets pour stocker les données sur le client :

localStorage - stockage de 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")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

localStorage Object

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

Instance

localStorage.lastname="Smith";document.getElementById("result").innerHTML="Last name: "+ localStorage.lastname;

Analyse d'instance :

Utilisez key="lastname" et value="Smith" pour créer une paire clé/valeur de stockage local

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 stockées sous forme de chaînes, vous pouvez convertir ce format selon 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 :

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).";

objet sessionStorage

La méthode sessionStorage cible une session Effectuer le stockage de données. Lorsque l'utilisateur ferme la fenêtre du navigateur, les données seront supprimées.

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

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.";

[Recommandations associées]

1. Recommandation spéciale  : Téléchargement de la version V0.1 de "php Programmer Toolbox"

2 Tutoriel vidéo en ligne h5 gratuit

Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!