Maison > Article > interface Web > Comment utiliser le stockage local Web H5

Comment utiliser le stockage local Web H5

php中世界最好的语言original: 2018-01-10 09:54:482413parcourir

Cette fois, je vais vous montrer comment utiliser le stockage local Web de H5. Comment utiliser le stockage local Web de H5 ? Quelles sont les précautions lors de l’utilisation du stockage local web de H5 Voici des cas pratiques, jetons un oeil.

Le stockage Web est une fonctionnalité très importante introduite par HTML5. Il permet de stocker des données localement sur le client. Il est similaire aux cookies HTML4, mais ses fonctions sont beaucoup plus puissantes que les cookies. La recommandation officielle de stockage Web est de 5 Mo par site Web.

Le stockage Web est divisé en deux types :

sessionStorage

localStorage

Cela se voit clairement au sens littéral Sortez, sessionStorage enregistre les données dans la session, et elles disparaissent à la fermeture du navigateur ; tandis que localStorage enregistre toujours les données localement sur le client

Qu'il s'agisse de sessionStorage ou de localStorage, les API disponibles sont les mêmes ; . Les plus couramment utilisés sont les suivants (prenons localStorage comme exemple) :

Enregistrer les données : localStorage.setItem(key, value); Lire les données : localStorage.getItem(key); ( key); Supprimer toutes les données : localStorage.clear(); Récupérer la clé d'un index : localStorage.key(index);

Comme ci-dessus, la clé et la valeur doivent être des chaînes En d’autres termes, l’API de Web Storage ne peut fonctionner que sur des chaînes.

Ensuite, nous développons une applet de carnet d'adresses simple via Web Storage pour démontrer l'utilisation d'API pertinentes ; nous souhaitons implémenter les fonctions suivantes :

Entrez les contacts, et les contacts ont des noms, mobiles numéro de téléphone 2 champs, utilisez le numéro de téléphone mobile comme clé pour stocker dans localStorage ; recherchez le propriétaire en fonction du numéro de téléphone mobile ; répertoriez toutes les informations de contact actuellement enregistrées

Écrivez d'abord un code html simple

<!DOCTYPEHTML>    
<html>    
<head>    
<metacharsetmetacharset="utf-8"/>    
<title>H5本地存储之WebStorage篇</title>    
</head>    
<body>  
<divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">  
<labelforlabelfor="user_name">姓名：</label>  
<inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>  
<br/>  
<labelforlabelfor="mobilephone">手机：</label>  
<inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>  
<br/>  
<inputtypeinputtype="button"onclick="save()"value="新增记录"/>  
<hr/>  
<labelforlabelfor="search_phone">输入手机号：</label>  
<inputtypeinputtype="text"id="search_phone"name="search_phone"/>  
<inputtypeinputtype="button"onclick="find()"value="查找机主"/>  
<pidpid="find_result"><br/></p>  
</div>  
<br/>  
<dividdivid="list">  
</div>  
</body>  
</html>

Pour enregistrer les contacts, implémentez simplement la méthode JS suivante :

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存数据

Pour trouver le propriétaire, implémentez la méthode JS suivante :

//查找数据   
functionfind(){   
varsearch_phone=document.getElementById("search_phone").value;   
varname=localStorage.getItem(search_phone);   
varfind_result=document.getElementById("find_result");   
find_result.innerHTML=search_phone+"的机主是："+name;   
}

I Je crois que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

12 conseils de conception H5 impopulaires

Comment utiliser postMessage pour implémenter deux pages Web dans H5 Transfer données entre

Comment dessiner une étoile à cinq branches en H5

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser les balises vidéo et audio et les barres de progression dans H5Article suivant：Comment utiliser les balises vidéo et audio et les barres de progression dans H5

Articles Liés

Voir plus