Stockage Web HTML5
Stockage Web HTML5
Grace à 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é?:
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--本地存儲(chǔ)</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=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對(duì)不起，您的瀏覽器不支持 web 存儲(chǔ)。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">點(diǎn)我！</button></p>
<div id="result"></div>
<p>點(diǎn)擊該按鈕查看計(jì)數(shù)器的增加。</p>
<p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),重新打開(kāi)此頁(yè)面,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
</body>
</html>
