Découvrez les conseils d'utilisation de la fonction de stockage local HTML5

Cet article présente principalement les compétences d'application de la fonction de stockage local HTML5. Grâce à des exemples, vous pouvez approfondir votre compréhension du stockage local HTML5 et l'appliquer habilement. Les amis intéressés peuvent s'y référer.

Implémentons une application simple. Dans cette application, l'utilisateur saisit le nom d'utilisateur et le numéro de téléphone portable, et les routines pertinentes peuvent être enregistrées localement, et des opérations de base telles que la recherche et l'affichage peuvent être effectuées.

Seul le code clé m'est donné ci-dessous. Vous pouvez ajouter vous-même la structure du projet, le code de base et le style CSS.

Nous complétons la répartition selon les fonctions.

1. Fonction de stockage

Ici, nous devons compléter Lorsque l'utilisateur saisit son nom et son numéro de téléphone portable, ses informations sont stockées dans Web Storage. le code HTML est le suivant :

<form>     
     <labelforlabelforlabelforlabelfor=”username”>姓名：</label>     
     <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
     <labelforlabelforlabelforlabelfor=”mobilephone”>手机号：</label>     
     <input type=”text” id=”mobilephone”name=”mobilephone” />        
     <input type=”button” onclick=”save()”vale=”新增记录” />     
</form>

Le code ci-dessus est un formulaire Une fois que l'utilisateur a saisi le nom et le numéro de téléphone portable, cliquez sur Ajouter un enregistrement pour enregistrer localement la paire clé-valeur nom-numéro de téléphone portable. Le code spécifique de la fonction de sauvegarde en js est le suivant :

function save(){     
     var mobilePhone= document.getElementById(“mobilephone”).value;     
     var userName= dpcument.getElementById(“username”).value;     
     localStorage.setItem(mobilePhone,userName);     
}

La logique de la fonction de sauvegarde est très simple, qui consiste à retirer la valeur saisie par l'utilisateur, puis à utiliser la fonction setItem de localStorage pour stocker les informations sous forme de paires clé-valeur dans le milieu Web Storage.

2. Fonction de recherche

La fonction de recherche doit être mise en œuvre lorsque l'utilisateur saisit un numéro de téléphone, les informations de recherche correspondantes dans la base de données s'affichent. Le code HTML est le suivant :

<label for=”search”>请输入手机号：</label>     
<input type=”text" id=”search”name=”search” />     
<input type=”button” onclick=”find()”value=”查找”>     
<p id=”result”><p>

La zone de résultat permet de placer les résultats de la requête. Voici le code pertinent pour la fonction de recherche dans js :

function find(){     
     var search =document.getElementById(“search”).value;     
     var name = localStorge.gteItem(search);     
     var result =document.getElementById(“result”);     
     result.innerHTML= search + “:” + name;     
}

Obtenez d'abord le numéro de téléphone mobile saisi par l'utilisateur, puis utilisez getItem pour zoomer afin d'obtenir le nom d'utilisateur avec ce numéro de téléphone mobile de la base de données, et enfin l'afficher ensemble dans la zone de résultats au milieu.

Les deux fonctions ci-dessus sont les fonctions les plus élémentaires. Nous continuerons à explorer l'utilisation avancée du stockage local et comment utiliser librement la fonction de stockage local dans les applications mobiles. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5 !