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(&#39;page&#39;);
</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!