Maison >interface Web >Tutoriel H5 >Comment LocalStorage de H5 stocke les valeurs d'actualisation localement
Cette fois, je vais vous montrer comment le LocalStorage de H5 stocke les valeurs de rafraîchissement localement. Quelles sont les précautions pour que le LocalStorage de H5 stocke les valeurs de rafraîchissement localement. Voici un cas pratique, jetons un coup d'oeil. .
La plus grande différence entre les deux technologies de stockage du H5 est le cycle de vie.
1. localStorage est le stockage local, et la période de stockage n'est pas limitée
2. sera perdu à la fermeture de la page.
Utilisation :
localStorage.setItem("key", "value") //Stockage
localStorage.getItem(key)//Obtenir la valeur par clé
localStorage.valueOf( )//Obtenir toutes les valeurs
localStorage.removeItem("key")//Supprimer une seule valeur, Faites attention aux guillemets
localStorage.clear()//Supprimer toutes les données
localStorage.length//Obtenir le nombre de données
localStorage.key(N) //Obtenir la Nième valeur clé de chaque donnée
Remarque : localStorage et sessionStorage sont les mêmes que ci-dessus, et les méthodes d'utilisation sont les mêmes
Quelques-unes sont couramment résumés utilisés :
localStorage.key = 1;//Définir le stockage, clé nommée, la valeur est 1
localStorage.removeItem("key");//Remove clé de stockage, pensez à ajouter des guillemets
Ce qui suit est un exemple pratique de test :
pour enregistrer localement le contenu du texte saisi, afin qu'après la fermeture du navigateur et sa réouverture, le contenu précédemment saisi est toujours là (courant dans DingTalk sur les téléphones mobiles) Le point d'entrée des champs tels que les demandes de congés dans le journal).
Tout d'abord, créez une zone de texte sur la page. Ce qui suit est jQuery :
if(!localStorage.getItem("text")) //window对象的话,前面的window省略了哦 localStorage.setItem("text",""); //这里先判断一下,做空白存储,否则返回 NULL 显示出来体验不好,这里的if大括号省去了 localStorage.text = localStorage.getItem("text"); //取值 $("textarea").html(localStorage.text); //显示 $("textarea").keyup(function(){ //这里有很多,比如blur, change, keydown, 还有做个定时器也行,实用于多字段存储 localStorage.setItem("text",$(this).val()); //重新存储 });
Ce qui précède peut implémenter une petite fonction pratique, reflétant H5. le stockage local est toujours très utile. Bien sûr, s'il y a beaucoup de champs, une méthode JSON est fournie ! Voir ce qui suit, téléchargé sur Internet
<script type="text/javascript"> if(window.sessionStorage){ alert('ok'); }else{ alert('fail'); } // 设置值 sessionStorage.setItem('key_a', 1); // 取值 var key_a = sessionStorage.getItem('key_a'); console.log(key_a); // 删除 sessionStorage.removeItem('key_a'); console.log(sessionStorage.getItem('key_a'));// null sessionStorage.setItem('key_b', 1); sessionStorage.setItem('key_c', 2); // 清除所有键值 sessionStorage.clear(); console.log(sessionStorage.key_b); console.log(sessionStorage.key_c); console.log('=================='); // 设置值和取值也可以使用.符号,类似于取对象属性 // 设置值 sessionStorage.key_d = 12; // 取值 var key_d = sessionStorage.key_d; console.log(key_d); // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null console.log(sessionStorage.key_null);// undefined console.log(sessionStorage.getItem('key_null'));// null console.log('==========简单演示一个存放对象的例子========'); var obj = { a : 12, b : [1,2,3,4,5], c : { x : 'a', y : ['bb', 12, 'cc', {a:1,b:2}], z : 1333 } }; sessionStorage.setItem('page', JSON.stringify(obj)); // 取值 var page = JSON.parse(sessionStorage.getItem('page')); console.log(page); // 遍历下数组 for(var i=0;i< page.b.length;i++){ console.log(page.b[i]); } // 遍历对象,通常用in for(var j in page.c){ console.log(page.c[j]) } // 删除key sessionStorage.removeItem('page'); </script>
Exemple : Compteur, actualisez la page, vous pouvez voir l'effet :
<p id="test"></p> <script> var storage = window.localStorage; if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0); storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换 document.getElementById("test").innerHTML = storage.pageLoadCount; //showStorage(); </script>
A noter que le stockage local HTML5 ne peut stocker caractères La chaîne sera automatiquement convertie en chaîne lorsqu'elle est stockée dans n'importe quel format, donc lors de la lecture, vous devez effectuer vous-même la conversion de type. C'est pourquoi parseInt doit être utilisé dans le code précédent.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée de la méthode de stockage H5
zepto permet un défilement transparent de haut en bas sur le terminal mobile
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!