communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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

8.jpg

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-le

Objet 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



Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492519 joue