Stockage Web HTML5
Grâce à HTML5, les données de navigation des utilisateurs peuvent être stockées 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.
Stockage Web du stockage local HTML5
Le stockage Web est une fonctionnalité très importante introduite par HTML5 et est souvent utilisé en face- fin du développement. Les données peuvent être stockées localement sur le client, comme les cookies HTML4, mais les fonctions peuvent être beaucoup plus puissantes que les cookies. La taille du cookie est limitée à 4 Ko, et Web Storage recommande officiellement 5 Mo pour chaque site Web. Le stockage Web est divisé en deux types :
sessionStorage
localStorage
Littéralement parlant, il peut il est clairement visible que sessionStorage enregistre les données dans la session et disparaît lorsque le navigateur est fermé ; tandis que localStorage enregistre toujours les données localement sur le client, à moins que les données ne soient activement supprimées, qu'il s'agisse de sessionStorage ou ; localStorage, les API qui peuvent être utilisées sont les mêmes. Les méthodes couramment utilisées sont les suivantes :
Enregistrer les données : localStorage.setItem( key, value ); value );
Lire les données : localStorage.getItem( key ); sessionStorage.getItem( key );
Supprimer des données uniques : localStorage.removeItem( key );
Supprimer toutes les données : localStorage.clear( ); sessionStorage.clear( );
Récupérer la clé d'un index : localStorage.key( index ); 🎜>
Les deux ont l'attribut length indiquant le nombre de clés, c'est-à-dire la longueur de la clé :
var keyLength1 = localStorage.length2 = sessionStorage . length;
Comme ci-dessus, la clé et la valeur doivent être des chaînes. En d'autres termes, l'API de stockage Web ne peut fonctionner que sur des chaînes.
Avant d'utiliser le stockage Web, vous devez vérifier si le navigateur prend en charge localStorage et sessionStorage :
if(typeof(Storage)! ==="non défini")
{
// Oui ! Prend en charge les objets localStorage sessionStorage !
// Du code....
} else {
// Désolé ! Le stockage Web n'est pas pris en charge.
}
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5--本地存储</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>
section suivante