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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="刘奇";
document.getElementById("result").innerHTML="姓名: " + localStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";
}
</script>
</body>
</html>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 : <🎜. >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</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 + " time(s).";
}
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>Exécutez le programme et essayez-leObjet 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 : :<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="点击按钮 " + sessionStorage.clickcount + " time(s) ";
}
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>Exécutez le programme pour l'essayer