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>關閉瀏覽器選項卡(或窗口),再試一次,計數器將繼續(xù)計數(不是重置)。</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
