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>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <style type="text/css"> textarea { width: 300px; height: 300px; } .button { width: 100px; } </style> </head> <body> <script type="text/javascript"> //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 //页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 function saveSession() { var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var mydata = t2.value; var oStorage = window.sessionStorage; oStorage.mydata = mydata; t1.value += "sessionStorage保存mydata:" + mydata + "\n"; } function readSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "sessionStorage读取mydata:" + mydata + "\n"; } function cleanSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "sessionStorage清除mydata:" + mydata + "\n"; } function saveStorage() { var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var mydata = t2.value; var oStorage = window.localStorage; oStorage.mydata = mydata; t1.value += "localStorage保存mydata:" + mydata + "\n"; } function readStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "localStorage读取mydata:" + mydata + "\n"; } function cleanStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "localStorage清除mydata:" + mydata + "\n"; } </script> <div> <textarea id="t1"></textarea> <br> <label>需要保存的数据: </label> <br> <input type="text" id="t2" /> <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" /> <input type="button" class="button" onclick="readSession()" value="session读取" /> <input type="button" class="button" onclick="cleanSession()" value="session清除" /> <input type="button" class="button" onclick="saveStorage()" value="local保存" /> <input type="button" class="button" onclick="readStorage()" value="local读取" /> <input type="button" class="button" onclick="cleanStorage()" value="local清除" /> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Stockage Web HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]