Stockage Web HTML5

Stockage Web HTML5, une meilleure méthode de stockage local que les cookies.

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.

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 - pour les données stockage 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..
  }

objet localStorage

Il n'y a pas de limite de temps pour 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.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>
</body>
</html>

Exemple d'analyse :

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

Récupérez la valeur avec la valeur clé " lastname" Insérez ensuite 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, et 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 :

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  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).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我</button></p>
<div id="result"></div>
<p>单击该按钮查看计数器增加.</p>
<p>关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。</p>
</body>
</html>

objet sessionStorage

Le sessionStorage. La méthode collecte des données pour le stockage 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 :

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  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.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>单击该按钮查看计数器增加.</p>
<p>关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。</p>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <script> function clickCounter() { if(typeof(Storage)!=="undefined") { 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)."; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">点我</button></p> <div id="result"></div> <p>单击该按钮查看计数器增加.</p> <p>关闭浏览器选项卡(或窗口),再试一次,计数器将继续计数(不是重置)。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Stockage Web HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]